您的位置：首页 > Web前端 > JQuery
jQuery图片无缝滚动JS代码ul/li结构

2016-04-19 14:00 441 查看
<!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>
<script src="http://code.jquery.com/jquery-2.2.3.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)) return;
//克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
$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:10,//时长
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="demo/01.jpg"/><em>jquery 特效</em></a></li>
<li><a href="#"><img src="demo/02.jpg"/><em>滚动</em></a></li>
<li><a href="#"><img src="demo/01.jpg"/><em>导航</em></a></li>
<li><a href="#"><img src="demo/02.jpg"/><em>大全</em></a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航