这篇文章主要介绍了jquery如何实现轮播特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jquery如何实现轮播特效文章都会有所收获，下面我们一起来看看吧。
1、获取li的个数length和宽度width
var len=$('li').length,
liWidth=$('li').width,
因为是无缝轮播，要实现自然的过渡，我们还得做点什么，当图片滑到最后一张时，怎么样才会很自然的过渡到第一张，这个时候，如果第一张就在最后一张的后面，就可以了，所以，我们需要将第一张clone后append到li的最后
$('li:first').clone().appendTo('ul')
2、获取ul的宽度：ul的宽度等于所有li的宽度加上克隆的li的宽度
ulWidth=liWidth*(len+1)
似乎准备工作都做好了，那下一步我们就尝试让他动起来，首先想到是animate（）方法：
animate( properties [, duration ] [, easing ] [, complete ] )，
第一个参数properties：css的属性和值的对象，决定动画的效果，是上下还是左右等；
第二个参数duration：完成一个动画的时间，默认是400，单位是毫秒；
第三个参数easing：动画过渡使用的缓动函数，默认是swing（linear，swing），一般不用这个参数；
第四个参数complete：是指完成动画后执行的操作。
我们的动效是自右向左，所以通过改变ul的margin-left值来实现
$('ul').animate({
'marign-left': -liWidth*index
},3000,function(){
if(index==len){
index=0;
$('ul').css({'margin-left':'0px'})
}
})其中index指的是li的索引值，当li的索引值等于li的length值的时候，也就是动画执行到了最后一张，那么直接让ul的margin-left为0，li的索引值也为0。
这样还存在一个隐患，暂时不提。
下一步，当鼠标离开div的时候，图片自动播放。这是要用到hover（）和setInterval（）
setInterval（）在W3C是这样解释的：按照指定的周期（以毫秒计）来调用函数或计算表达式。不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
var autoPlay;
$('div').hover(function(){
clearInterval(autoPlay);
},function(){
autoPlay=setInterval(function(){
$('ul').animate({
'marign-left': -liWidth*index
},3000,function(){
if(index==len){
index=0;
$('ul').css({'margin-left':'0px'})；
index++;
}
});
}，3000)
}).trigger('mouseleave');这样，一个自动播放的功能似乎就实现了，可是我们还可以发现一个bug，第一帧停留的时间似乎有些长，为什么呢？
这个问题还是昨天得到了解决，当图片执行到最后一张时，他的index马上变为0，然后会执行两次，因此在这个判断中，我们需要当index为0时，让它自加1，index++，放到判断条件下。
还有一个问题，是昨天发现的，在这个轮播里面有两个时间，一个是动画执行时间，一个是播放时间，前者的时间一定要比后者的时间小，原因是js的执行顺序呢是自上而下的，，如果时间一致或者后者时间小于前者，那么，在这个时差里，动画将进不到判断条件里来，会一直播放，那么轮播就失败了。今天就分享到这里，下一次分享加上左右箭头和hover圆点的轮播效果。
附上完整的代码：
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播</title>
<style>
body,p,form,input,button,dl,dt,dd,ul,ol,li,h2,h3,h4,h5{margin:0;padding:0;list-style:none;}
body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;}
input,select,textarea{font-size:100%;}
.clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;}
.clearfix{*zoom:1;}
.big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;}
.pic-list{height: 400px;}
.pic-list li{float: left; width: 1920px; height: 400px;}
</style>
</head>
<body>
<div class="big-screen">
<ul class="pic-list clearfix">
<li>
<a href="javascript:;">
<img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/>
</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ul=$('.pic-list'),
li=ul.find('li'),
liW=li.outerWidth(true),
liLen=li.length,
index=0,
autoPlay;
li.first().clone().appendTo(ul);
ul.css({'width':liW*(liLen+1),'margin-left':-liW*index});
function play(){
if(!ul.is('animated')){
ul.stop().animate({
'margin-left':-liW*index
},480,function(){
if(index>liLen){
index=0;
ul.css({'margin-left':-liW*index});
index++;
}
});
}
}
$('.big-screen').hover(function(){
clearInterval(autoPlay);
},function(){
autoPlay=setInterval(function(){
play();
index++;
},500)
}).trigger('mouseleave');
})
</script>
</html>关于“jquery如何实现轮播特效”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“jquery如何实现轮播特效”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
