jquery廣告無縫輪播代碼實例
需要自行添加五張圖片和引用jquery庫
縱向輪播實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery廣告無縫輪播演示</title>
<script src="../js/jquery-1.12.4.js"></script>
<style type="text/css">
li {
list-style: none;
width: 380px;
height: 180px;
float: left;
}
img {
height: 180px;
width: 380px;
}
ul{
position: relative;
height: 180px;
width: 380px;
top: 0px;
padding: 0;
margin: 0;
}
.divFollow a{
background-color: #FFFFFF;
width: 18px;
height: 5px;
display: inline-block;
}
.mains .title {
font-size: 25px;
}
.g1 {
width: 380px;
height: 180px;
margin: 0 auto;
overflow: hidden;
}
#bb{
width: 380px;
height: 180px;
position: relative;
}
</style>
</head>
<body>
<div class="mains">
<div class="title">jquery廣告無縫輪播演示</div>
<div class="g1">
<ul id="ulID">
<li><img src="../img/1.jpg"></li>
<li><img src="../img/2.jpg"></li>
<li><img src="../img/3.jpg"></li>
<li><img src="../img/4.jpg"></li>
<li><img src="../img/5.jpg"></li>
<li><img src="../img/1.jpg"></li>
</ul>
</div>
</div>
<script type="text/javascript">
var PlaceTop = parseInt($("#ulID").css("top"));
function moveUL() {
var ulID = $("#ulID");
PlaceTop = --PlaceTop;
if(PlaceTop == -916) {
PlaceTop = -17;
}
ulID.css("top", PlaceTop);
if(PlaceTop < -916) {
alert("Eror!");
clearInterval(int);
}
}
int = setInterval("moveUL()", 10);
$(".g1").hover(function() {
clearInterval(int);
}, function() {
int = setInterval("moveUL()", 10);
});
</script>
<br>
<div style="text-align: center;overflow: hidden;width: 380px;height: 180px;margin: 0 auto;">
<div id="bb" style="display: inline-block;left:0px;">
<img style="left:0px;position: absolute;" src="../img/1.jpg" />
<img style="left:-380px;position: absolute;" src="../img/2.jpg" />
<img style="left:-760px;position: absolute;" src="../img/3.jpg" />
<img style="left:-1140px;position: absolute;" src="../img/1.jpg" />
</div>
<div id="bbFollow" class="divFollow" style="position: absolute;margin-top: -33px;width: 365px;text-align: right;">
<a></a>
<a></a>
<a></a>
</div>
</div>
<script type="text/javascript">
var moveId = $("#bb")
var PlaceLeft = parseInt(moveId.css("left"));
var intval;
var follow = 0;
var cicleTime = 18;
function moveImg() {
PlaceLeft = ++PlaceLeft;
if(PlaceLeft == 1140) {
PlaceLeft = 0;
}
follow = parseInt(PlaceLeft / 380);
if (follow > 2) {
follow = 0;
}
//小圖
$("#bbFollow a").each(function (index) {
if (follow == index) {
$(this).css("background-color", "#f6de09")
} else {
$(this).css("background-color", "#fff")
}
})
moveId.css("left", PlaceLeft);
}
intval = setInterval("moveImg()", cicleTime);
$("#bb").hover(function() {
clearInterval(intval);
}, function() {
intval = setInterval("moveImg()", cicleTime);
});
</script>
</body>
</html>效果截圖：
