jquery实现图片无缝轮播显示(个人随笔)
2016-04-06 16:03
711 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片无缝轮播显示</title> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <style> .box,.box2{ width:800px; height:260px; margin:160px auto; overflow:hidden; position:relative;} .box,.box2 p{ text-align:center;} .picBox,.picBox2{ margin:0px; padding:0px; list-style:none; width:1500px;} /*此处很关键,在实现无疑轮播时这个宽度一定要比显示图片数量+1的宽度宽*/ .picBox:hover,.picBox2:hover{ cursor:pointer;} .picBox li,.picBox2 li{ float:left;} .picBox img,.picBox2 img{ width:200px; height:240px;} </style> </head> <body> <div class="box"> <p>第一种图片轮播:非无缝轮播</p> <ul class="picBox"> <li><img src="images/ab1.jpg"/></li> <li><img src="images/ab2.jpg"/></li> <li><img src="images/ab3.jpg"/></li> <li><img src="images/ab4.jpg"/></li> <li><img src="images/ab5.jpg"/></li> </ul> </div> <div class="box2"> <p>第二种图片轮播:无缝轮播</p> <ul class="picBox2"> <li><img src="images/ab1.jpg"/></li> <li><img src="images/ab2.jpg"/></li> <li><img src="images/ab3.jpg"/></li> <li><img src="images/ab4.jpg"/></li> <li><img src="images/ab5.jpg"/></li> </ul> </div> <script> $(function(){ <!--第一种图片轮播:非无缝轮播--> function rollOne(){ $(".picBox li:first").animate({left:"-=200px"},"linear",function(){ $(this).remove().clone(true).appendTo(".picBox").fadeIn("slow"); }); } var startRollOne=setInterval(rollOne,2000); <!--鼠标移入停止移出继续--> $(".box").hover(function(){ clearInterval(startRollOne); },function(){ startRollOne=setInterval(rollOne,2000); }); <!--第二种图片轮播:无缝轮播--> <!--这种无缝轮播可以通过设置animate动画播放速度值和setInterval中的函数调用时间间隔实现间隔无缝轮播--> function rollTwo(){ $(".picBox2").animate({marginLeft:"-200px"},2000,"linear",function(){ $(".picBox2").css({marginLeft:"0px"}); $(".picBox2 li:first").remove().clone(true).appendTo(".picBox2"); }) } var startRollTwo=setInterval(rollTwo,2000); <!--鼠标移入停止移出继续--> $(".picBox2").hover(function(){ clearInterval(startRollTwo); },function(){ startRollTwo=setInterval(rollTwo,2000); }); }); </script> </body> </html>
原文地址:
http://www.cnblogs.com/Farris/p/4463734.html?utm_source=tuicool&utm_medium=referral
相关文章推荐
- jQuery集合
- JavaScript 原生和JQuery 的Ajax--源自技术
- jquery.validate.js表单验证
- 在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?
- jquery学习之add()
- jQuery中height()、innerheight()、outerheight()有什么不同
- 使用 jQuery 复制文字到剪贴板的技巧
- 使用JQuery Mobile时,解决fieldset在页面缩小时不会换行
- JQuery跨域Ajax
- jquery 轮播图
- jQuery诞生记-原理与机制
- jQuery.extend 函数详解
- jquery 获取 combo box 中的值
- jquery中attr和prop的区别
- jQuery validate 添加表单验证方法
- php+jquery+ajax+json的一个最简单实例
- 如何自己开发一款js或者jquery插件
- JQuery_$(document).ready() 与 $(window).load()方法比较
- jQuery/Ajax/PHP/Json 的一个综合例子
- jQuery的ajaxStart方法和ajaxStop方法