您的位置：首页 > Web前端 > JQuery
JQUERY图片循环滚动

2017-07-26 20:41 176 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQUERY图片循环滚动</title>
<meta charset="utf-8" />
<style>
body,ul,li{
margin:0;
padding:0;
}
body{
font:14px/24px Microsoft YaHei;
color:#333;
}
ul{
list-style:none;
}
a{
color:#333;
outline:none;
text-decoration:none;
}
a:hover{color:#ffd800;}
.warp{width:1326px;padding-top:30px; margin:0 auto;background:#ccc;}
.boxs {
padding: 15px;
margin: 0 auto 30px;
background-color: #e4fbff;
width:1296px;
}
.autoBox{
position:relative;
margin:0 auto;
overflow:hidden;
}
.autoBox ul{
position:absolute;
list-style:none;
z-index:2;
}
#autoScroll{
width:auto;
height:264px;
}
#autoScroll ul li{
float:left;
width:308px;
height:258px;
padding:3px;
margin:0 5px;
_display:inline;
}
#autoScroll ul li a{
display: block;
padding: 3px;
border: 1px solid #dbdbdb;
box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);
}
#autoScroll li img{
width:300px;
height:250px;
display:block;
}
</style>
</head>
<body>
<div class="warp">
<div class="boxs">
<div class="autoBox" id="autoScroll">
<ul>
<li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview1"/></a></li>
<li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview2" /></a></li>
<li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview3" /></a></li>
<li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview4" /></a></li>
<li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview5" /></a></li>
</ul>
</div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//方法一，不完善
(function(jQuery){
$.fn.autoScroll = function (o) {
o = $.extend({//设置默认参数
direction: "left",
interval: null,
speed: null,
distance: null,
liWidth: null,
liHeight: null,
showNum:null
}, o || {});
return this.each(function () {//回调开始
var $ts = $(this),
$ul = $ts.children("ul"),
$li = $ul.children("li"),
len = $li.length;
if (o.direction == "left" || o.direction == "right") {
$ts.css({ "width": o.showNum * o.liWidth });
$ul.css({ "width": len * o.liWidth });
$li.css({ "float": "left" });
};
switch (o.direction) {//分两种情况，进行事件调用
case "left": sroLeft();
break;
case "right": sroRight();
break;
};
function sroLeft() {//向左滚动事件
$ul.css("left", 0);
var left;
function leftMoving() {
var dis = -o.distance,
dif = -o.liWidth * (len - o.showNum),
left = parseFloat($ul.css("left"));
if (left <= dif) {
$ul.css("left", 0);
left = 0;
$ul.delay(o.interval);
};
var ltDis = left + dis;
if (ltDis <= dif) {
ltDis = dif;
}
$ul.animate({ "left": ltDis + "px" }, o.speed);
};
$ul.hover(function(){
clearInterval(fnLeft);
}, function(){
fnLeft = setInterval(function(){leftMoving() }, o.interval);
});
fnLeft = setInterval(function(){leftMoving() },o.interval);
}
/*function sroRight(){}*/
});

};
})(jQuery);
</script>
<script>
$(function () {
$("#autoScroll").autoScroll({
direction: "left", //滚动方向
interval: 40,     //滚动间隔
speed: 10,       //滚动完成耗时,一定要小于'滚动间隔'
distance: 3,     //单次滚动距离
liWidth: 324,   //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数)
showNum: 4       //显示几个li，父级高会自适应，但不要超过最大个数
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JQUERY
相关文章推荐
新的分享
章节导航