轮播图说起来非常简单，就是几张图片一直不停的轮流播放，但是要想写好代码，也要考虑下性能问题，下面我们来简单的实现一下。
首先，页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/ad.css"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ad.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<div id="imgDiv">
<img id="leftImg"/>
<img id="centerImg"/>
<img id="rightImg"/>
</div>
<span id="leftBtn"></span>
<span id="rightBtn"></span>
<span id="circleSpan"></span>
</div>
</body>
</html>
接下来，写样式内容ad.css，将页面内容完善。
body{
margin: 0px;
background-color: #ccc;
}
#box{
width: 520px;
height: 280px;
margin: 60px auto;
position: relative;
}
#imgDiv{
width: 520px;
height: 280px;
overflow: hidden;
position: relative;
border-radius: 10px;
}
#imgDiv img{
position: absolute;
}
#leftImg{
left:-520px;
}
#centerImg{
left:0px;
}
#rightImg{
left: 520px;
}
#leftBtn{
display: none;
width: 71px;
height: 71px;
position: absolute;
left: -35px;
top: 105px;
background-image: url(../img/but.png);
background-position-x: 71px;
}
#leftBtn:hover{
background-position-x: 0px;
}
#rightBtn{
display: none;
width: 71px;
height: 71px;
position: absolute;
left: 485px;
top: 105px;
background-image: url(../img/but.png);
background-position: 71px 71px;
}
#rightBtn:hover{
background-position-x: 0px;
}
#circleSpan{
display: block;
position: absolute;
height: 30px;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
left: 50px;
top: 240px;
}
#circleSpan span{
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: white;
margin: 10px 5px 10px 5px;
float: left;
}
这些都是页面基础代码，接下来我们主要来看一下JS代码ad.js。
$(function(){
// 设定循环操作
var time = setInterval(move, 2000);
// 定义图片数组
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
// 得到3张图片框
var leftImg = $("#leftImg");
var centerImg = $("#centerImg");
var rightImg = $("#rightImg");
// 设置当前显示的图片
var currentIndex = 0;
// 设置初始图片
leftImg.attr("src", imgArr[imgArr.length - 1]);
centerImg.attr("src", imgArr[0]);
rightImg.attr("src", imgArr[1]);
// 设置圆点的数量和位置
for (var i = 0; i < imgArr.length; i++) {
$("#circleSpan").append("<span></span>");
}
$("#circleSpan").css("left", (520 - 20 * imgArr.length)/2 + "px");
$("#circleSpan span:first").css("background-color", "orange");
// 鼠标悬停和离开事件
$("#box").hover(function(){
$("#leftBtn,#rightBtn").show();
// 停止循环
clearInterval(time);
}, function(){
$("#leftBtn,#rightBtn").hide();
// 继续循环
time = setInterval(move, 4000);
});
// 给左右按钮添加点击事件
$("#leftBtn").click(function(){
// 每次滚动显示下一张的图片
if(currentIndex == 0){
currentIndex = imgArr.length - 1;
}else{
currentIndex--;
}
// 执行滚动的动画
leftImg.stop(false, true).animate({"left":"0px"}, 100);
centerImg.stop(false, true).animate({"left":"520px"}, 100);
rightImg.stop(false, true).animate({"left": "1040px"}, 102, function(){
mvoeComplete();
});
});
$("#rightBtn").click(function(){
// 每次滚动显示下一张的图片
currentIndex++;
// 执行滚动的动画
leftImg.stop(false, true).animate({"left":"-1040px"}, 100);
centerImg.stop(false, true).animate({"left":"-520px"}, 100);
rightImg.stop(false, true).animate({"left": "0px"}, 102, function(){
// 动画结束时执行
mvoeComplete();
});
});
function move(){
// 每次滚动显示下一张的图片
currentIndex++;
// 执行滚动的动画
leftImg.stop(false, true).animate({"left":"-1040px"}, 500);
centerImg.stop(false, true).animate({"left":"-520px"}, 500);
rightImg.stop(false, true).animate({"left": "0px"}, 502, function(){
// 动画结束时执行
mvoeComplete();
});
}
function mvoeComplete(){
// 当滚动结束后位置改变回来
leftImg.css({"left":"-520px"});
centerImg.css({"left":"0px"});
rightImg.css({"left":"520px"});
// 当滚动结束后改变图片显示
leftImg.attr("src", imgArr[(currentIndex - 1) % imgArr.length]);
centerImg.attr("src", imgArr[currentIndex % imgArr.length]);
rightImg.attr("src", imgArr[(currentIndex + 1) % imgArr.length]);
// 改变圆点的颜色
$("#circleSpan span:eq(" + (currentIndex % imgArr.length) + ")").css("background-color", "orange");
// 将其他的圆点颜色还原成白色
$("#circleSpan span:not(:eq(" + (currentIndex % imgArr.length) + "))").css("background-color", "white");
}
});
至此，就完成了一个简单的轮播图效果，将js中的图片数组改成自己的图片路径即可。
网友评论