<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>JQUERY图片循环滚动</title> <meta charset="utf-8" /> <style> body,ul,li{ margin:0; padding:0; } body{ font:14px/24px Microsoft YaHei; color:#333; } ul{ list-style:none; } a{ color:#333; outline:none; text-decoration:none; } a:hover{color:#ffd800;} .warp{width:1326px;padding-top:30px; margin:0 auto;background:#ccc;} .boxs { padding: 15px; margin: 0 auto 30px; background-color: #e4fbff; width:1296px; } .autoBox{ position:relative; margin:0 auto; overflow:hidden; } .autoBox ul{ position:absolute; list-style:none; z-index:2; } #autoScroll{ width:auto; height:264px; } #autoScroll ul li{ float:left; width:308px; height:258px; padding:3px; margin:0 5px; _display:inline; } #autoScroll ul li a{ display: block; padding: 3px; border: 1px solid #dbdbdb; box-shadow: 0 0 3px rgba(170, 223, 252, 0.5); } #autoScroll li img{ width:300px; height:250px; display:block; } </style> </head> <body> <div class="warp"> <div class="boxs"> <div class="autoBox" id="autoScroll"> <ul> <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview1"/></a></li> <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview2" /></a></li> <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview3" /></a></li> <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview4" /></a></li> <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview5" /></a></li> </ul> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> //方法一,不完善 (function(jQuery){ $.fn.autoScroll = function (o) { o = $.extend({//设置默认参数 direction: "left", interval: null, speed: null, distance: null, liWidth: null, liHeight: null, showNum:null }, o || {}); return this.each(function () {//回调开始 var $ts = $(this), $ul = $ts.children("ul"), $li = $ul.children("li"), len = $li.length; if (o.direction == "left" || o.direction == "right") { $ts.css({ "width": o.showNum * o.liWidth }); $ul.css({ "width": len * o.liWidth }); $li.css({ "float": "left" }); }; switch (o.direction) {//分两种情况,进行事件调用 case "left": sroLeft(); break; case "right": sroRight(); break; }; function sroLeft() {//向左滚动事件 $ul.css("left", 0); var left; function leftMoving() { var dis = -o.distance, dif = -o.liWidth * (len - o.showNum), left = parseFloat($ul.css("left")); if (left <= dif) { $ul.css("left", 0); left = 0; $ul.delay(o.interval); }; var ltDis = left + dis; if (ltDis <= dif) { ltDis = dif; } $ul.animate({ "left": ltDis + "px" }, o.speed); }; $ul.hover(function(){ clearInterval(fnLeft); }, function(){ fnLeft = setInterval(function(){leftMoving() }, o.interval); }); fnLeft = setInterval(function(){leftMoving() },o.interval); } /*function sroRight(){}*/ }); }; })(jQuery); </script> <script> $(function () { $("#autoScroll").autoScroll({ direction: "left", //滚动方向 interval: 40, //滚动间隔 speed: 10, //滚动完成耗时,一定要小于'滚动间隔' distance: 3, //单次滚动距离 liWidth: 324, //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数) showNum: 4 //显示几个li,父级高会自适应,但不要超过最大个数 }); }); </script> </body> </html>
JQUERY图片循环滚动
翻译文章标签 JQUERY 文章分类 JavaScript 前端开发
上一篇:鼠标滑过字体颜色从左向右渐变
下一篇:js无缝滚动
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章