jq无缝轮播
Posted humility
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq无缝轮播相关的知识，希望对你有一定的参考价值。
<!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://fpoimg.com/300x250?text=Preview1"/></a></li>
<li><a href="#"><img src="http://fpoimg.com/300x250?text=Preview2" /></a></li>
<li><a href="#"><img src="http://fpoimg.com/300x250?text=Preview3" /></a></li>
<li><a href="#"><img src="http://fpoimg.com/300x250?text=Preview4" /></a></li>
<li><a href="#"><img src="http://fpoimg.com/300x250?text=Preview5" /></a></li>
<li><a href="#"><img src="http://fpoimg.com/300x250?text=Preview6" /></a></li>
<li><a href="#"><img src="http://fpoimg.com/300x250?text=Preview7" /></a></li>
</ul>
</div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//方法二
$(function () {
var oul = $("#autoScroll ul");
var oulHtml = oul.html();
oul.html(oulHtml + oulHtml);
var timeId = null;
var ali = $("#autoScroll ul li");
var aliWidth = ali.eq(0).width();
var aliSize = ali.size();
var ulWidth = aliWidth * aliSize;
oul.width(ulWidth);
// var speed = 2;//right
var speed = -2;//left
function slider() {
if (speed < 0) {
if (oul.css("left") == -ulWidth / 2 + "px") {
oul.css("left", 0);
}
oul.css("left","+=-2px");
}
if (speed > 0) {
if (oul.css(‘left‘) == ‘0px‘) {
oul.css(‘left‘, -ulWidth / 2 + ‘px‘);
}
oul.css(‘left‘, ‘+=‘ + speed + ‘px‘);
}
}
timeId = setInterval(slider, 30);
$(".warp").mouseover(function () { clearInterval(timeId); });
$(".warp").mouseout(function () { timeId = setInterval(slider, 30); });
});
</script>
</body>
</html>
以上是关于jq无缝轮播的主要内容，如果未能解决你的问题，请参考以下文章