jquery如何实现点击图标实现滚动和自动播放效果
<div class=”Links”>
<h3>123</h3>
<span class=”prex”>上一页</span><span class=”next”>下一页</span>
<div class=”picBd”>
<ul>
<li><a href=”#”><img src=’#’ border=’0′ width=’89’ height=’103’/></a></li>
<li><a href=”#”><img src=’#’ border=’0′ width=’89’ height=’103’/></a></li>
</ul>
</div>
</div>
jquery代码
<script>
$(function(){
var page = 1;
var i = 11;
var $pre = $(‘.brands span.pre’)
var $next = $(‘.brands span.next’);
var $showMoney = $(“.showMoney”);
var $autoFun;
//@Mr.Think***调用自动滚动
autoSlide();
//@Mr.Think***向前滚动
$next.click(function(){
var $parent = $(this).parents(“div.all”);
var $p_show = $parent.find(“div.showMoney”);
var $content = $parent.find(“div.brands”);
var p_width = $content.width();
var len = $p_show.find(“li”).length;
var page_count = Math.ceil(len / i);
if(!$p_show.is(“:animated”)){
if(page == page_count){
$p_show.animate({left:”0px”},”slow”);
page = 1;
}else{
$p_show.animate({left:’-=’+p_width},”slow”);
page++;
}
}
});
//@Mr.Think***停止滚动
clearFun($showMoney);
clearFun($pre);
clearFun($next);
clearFun($num);
//@Mr.Think***事件划入时停止自动滚动
function clearFun(elem){
elem.hover(function(){
clearAuto();
}, function(){
autoSlide();
});
}
function autoSlide(){
$next.trigger(‘click’);
$autoFun = setTimeout(autoSlide, 1000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
}
//@Mr.Think***清除自动滚动
function clearAuto(){
clearTimeout($autoFun);
}
$pre.click(function(){
var $parent = $(this).parents(“div.all”);
var $p_show = $parent.find(“div.picBd”);
var $content = $parent.find(“div.brands”);
var p_width = $content.width();
var len = $p_show.find(“li”).length;
var page_count = Math.ceil(len / i);
if( !$p_show.is(“:animated”) ){
if( page == 1 ){
$p_show.animate({ left : ‘-=’+p_width*(page_count-1) }, “slow”);
page = page_count;
}else{
$p_show.animate({ left : ‘+=’+p_width }, “slow”);
page–;
}
}
});
});
</script>
