html代碼:

代碼如下:

<h1>無縫滾動(dòng),向右滾動(dòng)</h1>

<ul id=guoul1>

<li><img src=img/f1.jpg alt=f1/></li>

<li><img src=img/f2.jpg alt=f2/></li>

<li><img src=img/f3.jpg alt=f3/></li>

<li><img src=img/f4.jpg alt=f4/></li>

<li><img src=img/f5.jpg alt=f5/></li>

<li><img src=img/f6.jpg alt=f6/></li>

<li><img src=img/f7.jpg alt=f7/></li>

</ul>

<h1>無縫滾動(dòng),向左滾動(dòng)</h1>

<ul id=guoul2>

<li>111111111111</li>

<li>222222222222</li>

<li>3333333333333</li>

<li>4444444444444</li>

<li>5555555555555</li>

<li>6666666666666</li>

<li>7777777777777</li>

<li>8888888888888</li>

<li>9999999999999</li>

</ul>

<h1>無縫滾動(dòng),向上滾動(dòng)</h1>

<ul id=guoul3>

<li>111111111111</li>

<li>222222222222</li>

<li>3333333333333</li>

<li>4444444444444</li>

<li>5555555555555</li>

<li>6666666666666</li>

<li>7777777777777</li>

<li>8888888888888</li>

<li>9999999999999</li>

</ul>

<h1>無縫滾動(dòng),向下滾動(dòng)</h1>

<ul id=guoul4>

<li>111111111111</li>

<li>222222222222</li>

<li>3333333333333</li>

<li>4444444444444</li>

<li>5555555555555</li>

<li>6666666666666</li>

<li>7777777777777</li>

<li>8888888888888</li>

<li>9999999999999</li>

</ul>

<h1>無縫滾動(dòng),非ul,li標(biāo)簽組合,向右滾動(dòng)</h1>

<div id=guoul5>

<p>111111111111</p>

<p>222222222222</p>

<p>3333333333333</p>

<p>4444444444444</p>

<p>5555555555555</p>

<p>6666666666666</p>

<p>7777777777777</p>

<p>8888888888888</p>

<p>9999999999999</p>

</div>

<h1>不動(dòng)</h1>

<ul id=guoul6>

<li>111111111111</li>

<li>222222222222</li>

<li>3333333333333</li>

<li>4444444444444</li>

<li>5555555555555</li>

<li>6666666666666</li>

<li>7777777777777</li>

<li>8888888888888</li>

<li>9999999999999</li>

</ul>

css代碼:

代碼如下:

ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}

ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}

li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: gray; color: yellow; margin-left:10px;}

#guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}

#guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}

js插件代碼:

代碼如下:

; (function ($) {

var defaults = {

dir: left, //none:不動(dòng),up:上,right:右,down:下,right:左

delay: 30,//執(zhí)行時(shí)間

};

$.fn.gyscontentdisplay = function (opt) {

opt = $.extend({}, defaults, opt);

//全局變量區(qū)域

var obj = $(this); //當(dāng)前對象

obj.css({ overflow: hidden }); //初始化元素

if (opt.dir == none) return;

var objlis = obj.children(); //對象中地子元素

objlis.css({ overflow: hidden });

var objsize = 0; //外框尺寸

var scrollevent = scrollleft; //滾動(dòng)條地滾動(dòng)方向

var litotalsize = 0, litotalsizeother = 0; //每個(gè)li元素地尺寸(寬或者高),克隆之后地總尺寸

var scrollsize = 0, //滾動(dòng)條地實(shí)際距離

scrollsizemax = 0, //滾動(dòng)條地最大距離

scrollsizemin = 0; //滾動(dòng)條地最小距離

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參數(shù)有誤);

}

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 < clonecount; 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);

});

}

//滾動(dòng)條地滾動(dòng)方法

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 () {

scrollsize--;

if (scrollsize <= scrollsizemin) scrollsize = scrollsizemax;

obj[scrollevent](scrollsize);

}

}

};

scrollchange(opt.dir);

interval = setinterval(scrollchange, opt.delay);

obj.children().on(mouseover, function () {

clearinterval(interval);

}).on(mouseleave, function () {

interval = setinterval(scrollchange, opt.delay);

});

}

})(jquery);

插件地調(diào)用:

代碼如下:

$(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 });

})

更多信息請查看IT技術(shù)專欄