<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery圖檔無縫滾動js代碼ul./li結構，可重用 - 懶人建站</title>
<meta name="keywords" content="jquery特效,JS代碼,js特效代碼大全,js特效廣告代碼,導航菜單代碼" />
<meta name="description" content="懶人建站為您提供-JS代碼，js特效代碼大全，js特效廣告代碼，下拉菜單，下拉菜單代碼，導航菜單代碼和基于jquery的各種特效與jquery插件。" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
//滾動
(function($){
$.fn.kxbdMarquee = function(options){
var opts = $.extend({},$.fn.kxbdMarquee.defaults, options);
return this.each(function(){
var $marquee = $(this);//滾動元素容器
var _scrollObj = $marquee.get(0);//滾動元素容器DOM
var scrollW = $marquee.width();//滾動元素容器的寬度
var scrollH = $marquee.height();//滾動元素容器的高度
var $element = $marquee.children(); //滾動元素
var $kids = $element.children();//滾動子元素
var scrollSize=0;//滾動元素尺寸
var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滾動類型，1左右，0上下
//防止滾動子元素比滾動元素寬而取不到實際滾動子元素寬度
$element.css(_type?'width':'height',10000);
//擷取滾動元素的尺寸
if (opts.isEqual) {
scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
}else{
$kids.each(function(){
scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
});
}
//滾動元素總尺寸小于容器尺寸，不滾動
if (scrollSize<(_type?scrollW:scrollH)){scrollSize=scrollW*2;}
//克隆滾動子元素将其插入到滾動元素後，并設定滾動元素寬度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
var numMoved = 0;
function scrollFunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
if (opts.loop > 0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir] = 0;
return clearInterval(moveId);
}
}
if(opts.direction == 'left' || opts.direction == 'up'){
var newPos = _scrollObj[_dir] + opts.scrollAmount;
if(newPos>=scrollSize){
newPos -= scrollSize;
}
_scrollObj[_dir] = newPos;
}else{
var newPos = _scrollObj[_dir] - opts.scrollAmount;
if(newPos<=0){
newPos += scrollSize;
}
_scrollObj[_dir] = newPos;
}
};
//滾動開始
var moveId = setInterval(scrollFunc, opts.scrollDelay);
//滑鼠劃過停止滾動
$marquee.hover(
function(){
clearInterval(moveId);
},
function(){
clearInterval(moveId);
moveId = setInterval(scrollFunc, opts.scrollDelay);
}
);
//控制加速運動
if(opts.controlBtn){
$.each(opts.controlBtn, function(i,val){
$(val).bind(opts.eventA,function(){
opts.direction = i;
opts.oldAmount = opts.scrollAmount;
opts.scrollAmount = opts.newAmount;
}).bind(opts.eventB,function(){
opts.scrollAmount = opts.oldAmount;
});
});
}
});
};
$.fn.kxbdMarquee.defaults = {
isEqual:true,//所有滾動的元素長寬是否相等,true,false
loop: 0,//循環滾動次數，0時無限
direction: 'left',//滾動方向，'left','right','up','down'
scrollAmount:1,//步長
scrollDelay:40,//時長
newAmount:3,//加速滾動的步長
eventA:'mousedown',//滑鼠事件，加速
eventB:'mouseup'//滑鼠事件，原速
};
$.fn.kxbdMarquee.setDefaults = function(settings) {
$.extend( $.fn.kxbdMarquee.defaults, settings );
};
})(jQuery);
</script>
<style>
a{ font-size:13px; color:#333333; text-decoration:none;}
a:hover{color:red; text-decoration:underline;}
img{ border:none;}
.marquee {width:560px;height:260px;overflow:hidden;border:1px solid #333; margin-top:20px;}
.marquee li{ display:inline; float:left; margin-right:12px;}
.marquee li a{ width:230px; height:260px; display:block; float:left; text-align:center; font-size:14px;}
.marquee li a:hove{ text-decoration:none;}
.marquee li img {width:160px; height:160px;}
.marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.marquee').kxbdMarquee({
direction:'left',
eventA:'mouseenter',
eventB:'mouseleave'
});
});
</script>
<div class="marquee">
<ul>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
</ul>
</div>
<div class="marquee">
<ul>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a><em>google 404</em></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
</ul>
</div>
<div class="marquee">
<ul>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
<li> <a href="#"><img src="http://www.google.com/images/errors/robot.png" alt="google 404" /></a></li>
</ul>
</div>
<p>jquery圖檔無縫滾動js代碼ul./li結構，可重用。</p>
</body>
</html> 轉載于:https://www.cnblogs.com/dying/p/3394529.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)