我用的jQuery库jquery-3.2.1.js可以在官网下载：http://jquery.com/download/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery实现轮播图</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<style>
#lunbo {
width: 850px;
height: 500px;
margin: 0px auto;
position: relative;
overflow: hidden;
}
#list {
position: absolute;
width: 4250px;
height: 500px;
z-index: 1;
}
#list img {
width: 850px;
height: 500px;
float: left;
}
#buttons {
position: absolute;
width: 90px;
height: 15px;
z-index: 2;
left: 389px;
bottom: 20px;
}
#buttons span {
width: 15px;
height: 15px;
background: #f1f1f1;
float: left;
margin-right: 15px;
border-radius: 50%;
cursor: pointer;
}
#buttons .on {
background: #cf1828;
}
.arrow {
position: absolute;
top: 230px;
z-index: 2;
display: none;
width: 35px;
height: 60px;
font-size: 30px;
font-weight: bold;
line-height: 60px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
text-decoration: none;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
#lunbo:hover .arrow {
display: block;
}
#prev {
left: 0px;
}
#next {
right: 0px;
}
</style>
<script>
$(document).ready(function () {
var lunbo = $("#lunbo");
var list = $("#list");
var prev = $("#prev");
var next = $("#next");
var spanGroup = $("#buttons span");
var imgwidth = $("#list img:first-child").eq(0).width();
var now = 1;
var timer = null;
prev.on("click", function () {
clearInterval(timer);
now--;
if (now < 0) {
if (Math.abs(now) % 3 == 1) {
now = 2;
}
else if (Math.abs(now) % 3 == 2) {
now = 1;
}
else {
now = 0;
}
}
showPic(now);
if (now == 0) {
now = 3;
}
if (now == 4) {
now = 1;
}
});
next.on("click", function () {
clearInterval(timer);
now++;
if (now > 4) {
if (now % 3 == 0) {
now = 3;
}
else if (now % 3 == 1) {
now = 4;
}
else {
now = 2;
}
}
showPic(now);
if (now == 0) {
now = 3;
}
if (now == 4) {
now = 1;
}
});
spanGroup.on("click", function () {
now = spanGroup.index(this) + 1;
showPic(now);
});
timer = setInterval(auto, 3000);
function auto() {
now++;
showPic(now);
if (now == 0) {
now = 3;
}
if (now == 4) {
now = 1;
}
}
lunbo.mouseover(function () {
clearInterval(timer);
});
lunbo.mouseout(function () {
timer = setInterval(auto, 3000);
})
function showPic(index) {
list.animate({ left: -index * imgwidth }, 1000, function () {
spanGroup.eq((index - 1) % 3).addClass("on").siblings().removeClass("on");
if (index == 0) {
list.css({
"left": -3 * imgwidth + "px"
});
}
if (index == 4) {
list.css({
"left": -imgwidth + "px"
});
}
});
};
});
</script>
</head>
<body>
<div id="lunbo">
<div id="list" style="left:-850px">
<img src="images/lunbo3.jpg" alt="3" />
<img src="images/lunbo1.jpg" alt="1" />
<img src="images/lunbo2.jpg" alt="2" />
<img src="images/lunbo3.jpg" alt="3" />
<img src="images/lunbo1.jpg" alt="1" />
</div>
<div id="buttons">
<span class="on"></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
时间： 2024-11-06 23:37:27