jquery如何实现点击图标实现滚动和自动播放效果

jquery如何实现点击图标实现滚动和自动播放效果

<div class=”Links”>

<h3>123</h3>

<span class=”prex”>上一页</span><span class=”next”>下一页</span>

<div class=”picBd”>

<ul>

<li><a href=”#” rel=”external nofollow” rel=”external nofollow” ><img src=’#’ border=’0′ width=’89’ height=’103’/></a></li>

<li><a href=”#” rel=”external nofollow” rel=”external nofollow” ><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>