jQuery插件scroll实现无缝滚动效果

2019-11-20 12:35:59

字体：大中小

来源：转载

供稿：网友

scroll滚动插件

支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置

默认配置参数可修改

$(".content").easysroll({ //默认配置参数 direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认left numberr: "1", //每一次滚动数量默认是1 delays:"1000",//完成一次动画所需时间默认是1000等于1秒 scrolling: "1000",//每一次动画的时间间隔默认是1000等于1秒 fadein:false,//是否支持淡入或淡出默认false enterStop:true //鼠标移入是否暂停滚动默认是true })

html代码：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>滚动插件（支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置）</title><script src="js/jquery-1.7.2.min.js" type="text/javascript"></script><script src="js/scroll.js" type="text/javascript"></script></head><style>*{ margin: 0px; padding: 0px;}.content{ width: 1010px; height:102px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }.content ul{list-style: none; margin: 0px; padding: 0px; }.content ul li{ width: 100px; height: 100px; border:#ccc solid 1px; overflow: hidden;cursor: pointer;}</style><body><h1>支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置</h1><div class="content"><ul type="box"><li><img src="uploads/allimg/150210/1-15021010125I64-lp.jpg"></li><li><img src="uploads/allimg/150210/1-1502100934032T-lp.png"></li><li><img src="uploads/allimg/150209/1-1502092312470-L.gif"></li><li><img src="uploads/allimg/150209/1-1502091243010-L.jpg"></li><li><img src="uploads/allimg/150208/1-15020Q549320-L.jpg"></li><li><img src="uploads/allimg/150204/1-150204143012445.jpg"></li><li><img src="uploads/150208/1-15020Q94340510.jpg"></li><li><img src="uploads/150207/1-15020GG54I43.jpg"></li><li><img src="uploads/allimg/131024/89.jpg"></li><li><img src="uploads/allimg/131024/85.png"></li><li><img src="uploads/allimg/131024/84.png"></li><li><img src="uploads/allimg/131024/83.jpg"></li><li><img src="uploads/allimg/131024/82.png"></li><li><img src="uploads/allimg/131024/81.png"></li><li><img src="uploads/allimg/131024/78.png"></li></ul></div><div>$(".content").easysroll({<br>//默认配置参数<br>direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认left<br>numberr: "1", //每一次滚动数量 默认是1<br>delays:"1000",//完成一次动画所需时间 默认是1000等于1秒<br>scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒<br>fadein:false,//是否支持淡入或淡出 默认false<br>enterStop:true; //鼠标移入是否暂停滚动 默认是true<br><br>})<br><br></div><script>$(".content").easysroll({//默认配置参数direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认leftnumberr: "1", //每一次滚动数量 默认是1delays:"1000",//完成一次动画所需时间 默认是1000等于1秒scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒fadein:false,//是否支持淡入或淡出 默认falseenterStop:true; //鼠标移入是否暂停滚动 默认是true})</script></body></html>

JS核心代码

(function ($) {$.fn.easysroll= function(options) {var parameter= {direction: "left",numberr: "1",delays:"1000",scrolling: "1000",fadein: false,enterStop:true};var ops = $.extend(parameter,options);var $this=$(this);var _this=this;var _time=null;var obj=_this.find("[type='box']");var items=obj.find("li");var itemsleg=items.length;var itemsW=items.outerWidth(true);var itemsH=items.outerHeight(true);var _direction=ops.direction;var _numberr =ops.numberr;var _delays=ops.delays;var _scrolling =ops.scrolling;var _fadein=ops.fadein;var _enterStop=ops.enterStop;if(_direction=="top" || _direction=="bottom"){items.css({"float":"none"});obj.width(itemsW*itemsleg);if(_direction=="bottom") {obj.css("margin-top",-_numberr*itemsH);}}else if(_direction=="left" || _direction=="right"){items.css({"float":"left"});obj.width(itemsW*itemsleg);if(_direction=="right") {obj.css("margin-left",-_numberr*itemsW);}}else{alert("您配置的滚动方向有误，请重新配置");return true;}function scroll(){if(_direction=="left"){obj.animate({"margin-left":-_numberr*itemsW},Number(_delays),function(){for (var i=0;i<_numberr;i++){obj.find("li").eq(0).appendTo(obj);}obj.css({"margin-left":0})if(_fadein){obj.find("li").eq(0).animate({"opacity":0},Number(_delays));obj.find("li").eq(itemsleg-1).css({"opacity":1});}});}else if(_direction=="right"){obj.animate({"margin-left":0},Number(_delays),function(){for(var i=0;i<_numberr;i++){obj.find("li").eq(itemsleg-1).prependTo(obj);};obj.css("margin-left",-_numberr*itemsW);if(_fadein){obj.find("li").eq(0).animate({"opacity":1},Number(_delays));obj.find("li").eq(itemsleg-1).css({"opacity":0});}});}else if(_direction=="top"){obj.animate({"margin-top":-_numberr*itemsH},Number(_delays),function(){for (var i=0;i<_numberr;i++){obj.find("li").eq(0).appendTo(obj);}obj.css({"margin-top":0});if(_fadein){obj.find("li").eq(0).animate({"opacity":0},Number(_delays));obj.find("li").eq(itemsleg-1).css({"opacity":1});}});}else if(_direction=="bottom"){obj.animate({"margin-top":0},Number(_delays),function(){for(var i=0;i<_numberr;i++){obj.find("li").eq(itemsleg-1).prependTo(obj);}obj.css("margin-top",-_numberr*itemsH);if(_fadein){obj.find("li").eq(0).animate({"opacity":1},Number(_delays));obj.find("li").eq(itemsleg-1).css({"opacity":0});}});}}$this.hover(function(){if(_enterStop){clearInterval(_time);}},function(){_time= setInterval(scroll,_scrolling);}).trigger('mouseleave');}})(jQuery);

以上所述就是本文的全部内容了，希望大家能够喜欢。

上一篇：如何使用HTML5地理位置定位功能

下一篇：Javascript非构造函数的继承