自己使用jquery寫的一個無縫滾動的插件_jquery

效果圖:

 

html代碼:

複製代碼代碼如下：

無縫滾動，滾動滾動

• 


• 


• 


• 


• 


• 


• 

無縫滾動，向左滾動

• 111111111111


• 222222222222


• 3333333li>3333333333
  
• 4444444444444


• 5555555555555


• 6666666666666


• 77777666666666
8888888888888

• 9999999999999

無縫滾動，向上滾動

• 111111111111


• 22222222222


• 3333333333333


• 444444li44> 5555555555555


• 66666666666666


• 7777777777777


• 8888888888898 🎜>

無縫滾動、階梯

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 5555555555555


• 6666 >
• 7777777777777


• 8888888888888


• 9999999999999

無縫，非滾動，li標籤組合，連續滾動

111111111111

222222222222

3333333333333

4444444444444

5555555555555

66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666p>7p>7p>7p> 🎜>

8888888888888

9999999999999

不動

;

• 111111111111


• 22222222222


• 3333333333333


• 4444444444> li>5555555555555


• 6666666666666


• 7777777777777


• 8888888888898 >
  

css程式碼：




複製程式碼

複製程式碼

程式碼如下： ul, li,h1 { 邊距: 0;填充：0；列表樣式類型：無；} ul,div { 高度：200px;邊框：1px 純紅色；寬度：300pdivxxx ；內邊距：30px；邊距：10px；列表樣式類型：無；} li,p { 高度：30px;行高：30px；頂部邊距：10px；背景顏色：灰色；顏色: 黃色;左邊距：10px;}

#guoul1{ 寬度：1000px;高度：188px；邊距：0；填充：0;}

#guoul1 li{ width:300px;高度：188px；邊距：0；填充：0；左邊距：10px;}


js外掛程式碼:

複製程式碼 程式碼如下:

; ) {
var defaults = {
dir: "left", //none:不動,up:上,right:右,down:下,right:左
delay: 30,//執行時間
};
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, defaults, opt);

/////🎜 >var obj = $(this); //目前物件
obj.css({ "overflow": "hidden" }); //初始化元素
if (opt.dir == "none") return ;
var objLis = obj.children(); //物件中的子元素
objLis.css({ "overflow": "hidden" });
var objSize = 0; //外框尺寸
var scrollEvent = "scrollLeft"; //捲軸的滾動方向
var liTotalSize = 0, liTotalSizeOther = 0; //每個li元素的尺寸(寬或高),克隆之後的總尺寸
var scrollSize = 0, //捲軸的實際距離
scrollSizeMax = 0, //捲軸的最大距離
scrollSizeMin = 0; //滾動條的最小距離
var interval = "" ; //記錄setInterval

if (opt.dir == "up" || opt.dir == "down") {//上下
objSize = obj.innerHeight();
scrollEvent = "scrollTop";
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize);
}
else if (opt.dir == "left" || opt.dir == "right") {//左右
objSize = obj.innerWidth();
scrollEvent = "scrollLeft";
obj.css({ "padding -left": 0, "padding-right": 0 }).width(objSize);
}
else {
alert("你的dir參數有誤");
}

var getChildTotalSize = function (dir) {// 定義取得li總尺寸的方法
if (dir == "left" || dir == "right") {
objLis.css( "float", "left");
return function () {
objLis.each(function () {
liTotalSize = $(this).outerWidth(true);
});
}
}
else if (dir == "up" || dir == "down") {
objLis.css("float", "none");
return function () {
objLis.each(function () {
liTotalSize = $(this).outerHeight(true);
});
}
}
} (opt. dir);
getChildTotalSize(); //得到所有的li的總尺寸,在方法中賦值

(function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize ); //賦值子元素幾次
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字串

for (var i = 0; i cloneHtmlNow = cloneHtmlStart;
}
obj.append(cloneHtmlNow);
liTotalSizeOther = (cloneCount 1) * liTotalSize; //取得新增了子元素之後的長度🎜> })();


if (opt.dir == "left" || opt.dir == "right") {
obj.css({ "position": "relative ", "z-index": 0 });
obj.children().css({ "position": "absolute", "z-index": 1 });
var left = 0;
obj.children().each(function () {
$(this).css({ "left": left "px", "top": 0 });
left = $( this).outerWidth(true);
});
}


//滾動條的滾動方法
function scrollChange(dir) {
if (dir = = "left" || dir == "up") {
obj[scrollEvent](0);
scrollChange = function () {
scrollSize ;
if (scrollSize >= liTotalSize) scrollSize = 0;
obj[scrollEvent](scrollSize);
}
}
else if (dir == "right" || dir == "down") {
scrollSizeMax = liTotalSizeOther - objSize;
obj[scrollEvent](scrollSizeMax);
scrollSize = scrollSizeMax;
scrollSizeMin = scrollSizeMax - liTotalSize;
scrollChange = function (Proll)>; (scrollSize obj[scrollEvent](scrollSize);
}
}
};
scrollChange(pop.opf (scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(interval);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
});
}
})(jQuery);


外掛程式的:
呼叫🎜>

複製程式碼

程式碼如下: $(function () { $("#guoul1" ).gysContentDisplay({ dir: "right" }); $("#guoul2").gysContentDisplay({ dir: "left" });

$("#guoul3").gysContentDisplay({ dir : "up" });

$("#guoul4").gysContentDisplay({ dir: "down" });
$("#guoul5").gysContentDisplay({ dir: "right" }) ;
$("#guoul6").gysContentDisplay({ dir: "none" });
})