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

2022-11-16 0 50

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>

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论