jquery 图片切换不流畅清空所有未完成的动画

最新推荐文章于 2021-10-01 14:07:08 发布

jazwoo

最新推荐文章于 2021-10-01 14:07:08 发布

阅读量2k

点赞数

分类专栏： js/ajax 文章标签： jquery scroll class javascript function xhtml

本文链接：https://blog.csdn.net/jazywoo123/article/details/6965651

版权

js/ajax 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

上次写的图片切换会产生动画多次切换不流畅，原因是上次动画未完成就进入下次切换动画，

导致切换以不流畅，jquery提供了stop方法中止未完成的动画。

stop() 方法停止当前正在运行的动画。语法:$(selector).stop(stopAll,goToEnd)参数:stopAll可选。

规定是否停止被选元素的所有加入队列的动画。

参数:goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style>
ul{
margin: 0px;
padding: 0px;
}
.img_change_item{
width:200px;
height:100px;
}
.img_change_item_controller{
width:20px;
height:10px;
}
.img_change_list{
list-style:none;
float:left;
}
#img_change_container{
width:2000px;
}
#img_change_viewport{
width:200px;
height:150px;
overflow:hidden;
}
</style>
<script type="text/javascript" language="javascript" src="jquery-min1.6.js">
</script>

</head>
<script type="text/javascript" language="javascript">
var direction=1;
var count=5;
var pic_width=200;
var current_index=1;
$(document).ready(function(){
  $(".img_change_item_controller").bind("mouseover",scroll);
});

var auto_scroll=setInterval(autoScroll,1000);
function autoScroll(){
   if(current_index==count){ //到最后一张回到第一张
   $("#img_change_viewport").scrollLeft( $("#img_change_viewport").scrollLeft()-(count-1)*pic_width);
current_index=1;
return;
   }
   var scroll_step=pic_width;
   var currPos=$("#img_change_viewport").scrollLeft();
   $("#img_change_viewport").animate({scrollLeft:currPos+scroll_step+"px"},"slow");
   current_index++;
}

function scroll(){
   $("#img_change_viewport").stop(true,true); //清空所有未完成的动画
   clearInterval(auto_scroll);
   var select_index=this.name;
   var scroll_step=(select_index-current_index)*pic_width; //滑动的间距
   if(select_index>current_index){
   direction=1;
   }else if(select_index<current_index){
   direction=0;
   }else{
   auto_scroll=setInterval(autoScroll,1000);
   return ; //选中当前的不做任何滑动
   }

   var currPos=$("#img_change_viewport").scrollLeft(); //当前的偏移
   if(direction==1){ //向左滑动
   $("#img_change_viewport").animate(
{scrollLeft:currPos+scroll_step+"px"},
"fast",
function(){auto_scroll=setInterval(autoScroll,1000);}
);
   }else if(direction==0){ //向右滑动
   $("#img_change_viewport").animate(
{scrollLeft:currPos+scroll_step+"px"},
"fast",
function(){auto_scroll=setInterval(autoScroll,1000); }
);
   }
   current_index=select_index;
}

</script>
<body>


<div>
<div id="img_change_viewport">
   <ul id="img_change_container">
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="1.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="2.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="3.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="4.jpg"/></a></li>
   <li class="img_change_list"><a href="javascript:;"><img class="img_change_item" src="1.jpg"/></a></li>
   <div style="clear:left;display:inline;"></div>
   </ul>
</div>
<ul>
   <li class="img_change_list"><img name="1" class="img_change_item_controller" src="1.jpg"/></li>
   <li class="img_change_list"><img name="2" class="img_change_item_controller" src="2.jpg"/></li>
   <li class="img_change_list"><img name="3" class="img_change_item_controller" src="3.jpg"/></li>
   <li class="img_change_list"><img name="4" class="img_change_item_controller" src="4.jpg"/></li>
   <div style="clear:left;display:inline;"></div>
</ul>
</div>

</body>
</html>

jazwoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片切换不流畅清空所有未完成的动画

上次写的图片切换会产生动画多次切换不流畅，原因是上次动画未完成就进入下次切换动画，导致切换以不流畅，jquery提供了stop方法中止未完成的动画。stop() 方法停止当前正在运行的动画。语法:$(selector).stop(stopAll,goToEnd)参数:stopAll可选。规定是否停止被选元素的所有加入队列的动画。参数:goToEnd 可选。规定是否允许完成当
复制链接

扫一扫