本文介绍用jQuery实现图片轮播的效果,所谓图片轮播就是将多张图片以滚动轮播的方式进行展示。
效果图:
点击左右按钮进行轮播,下方小圆点也可以点击进行轮播。‘
其原理图如下::
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery——水平轮播</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#container{
width:605px;
height:284px;
border:1px solid #000;
/*展示的盒子水平居中*/
margin:50px auto;
position: relative;
/*超出部分隐藏*/
overflow: hidden;
}
#box{
height:284px;
position: absolute;
left: 0;
top:0;
}
.topic{
width:605px;
height:284px;
/*使得所有图片在一行显示*/
float: left;
}
#pages{
width:100%;
height:20px;
padding:5px 0;
position: absolute;
left: 0;
bottom:0;
}
#pages div{
width:20px;
height:20px;
border-radius: 50%;
background: #fff;
opacity: 0.3;
float: left;
margin-left: 10px;
}
#pages div.curr{
background: #fb6705;
opacity: 1;
}
#prev,#next{
width:50px;
height: 150px;
background:#000;
font-size:34px;
position: absolute;
top:0;
bottom:0;
margin:auto 0;
color: #fff;
opacity: 0.8;
line-height: 150px;
text-align: center;
border-radius: 0 10px 10px 0;
}
#next{
right:0;
border-radius: 10px 0 0 10px;
}
#blogaddress{
position: absolute;
left:50%;
bottom:10%;
}
#blogaddress a{
/*text-decoration: none;*/
color:#000;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(window).on("load",function(){
// 获取所有的图片盒子
var $topics = $(".topic"),
// 获取一张图片的宽度
imgwidth = $topics.width(),
// 获取盒子的总长度
len = $topics.length,
// 下一张图片的索引
nextIndex = 1,
// 计时器
timer = null;
// 包裹图片的盒子(#box)总长度
$("#box").width(imgwidth*len);
// 自动轮播
// timer = setInterval(move,1500);
// 动态添加小圆点
$.each($(".topic"),function(index,element){
// 创建小圆点div并添加至#pages中
$("#pages").append("<div></div>");
// 给第一个小圆点添加样式
$("#pages :first-child").addClass("curr");
// 使用data()方法给每个小圆点添加一个index属性,方便之后的使用
$("#pages :last-child").data("index",index);
});
// 点击小圆点运动
$("#pages div").on("click",function(){
// 清除计时器
clearInterval(timer);
// 将此时点击的小圆点存放的index值赋值给nextIndex
nextIndex = $(this).data('index');
move();
timer = setInterval(move,1500);
});
// 上一张
$("#prev").on("click",function(){
clearInterval(timer);
//点击上一张的时候
nextIndex -=2;
console.log(nextIndex);
if(nextIndex<0){
nextIndex = nextIndex+len;
}
move();
timer = setInterval(move,1500);
});
// 下一张
$("#next").on("click",function(){
clearInterval(timer);
move();
timer = setInterval(move,1500);
});
// 运动函数
function move(){
// 改变左边位置
var _left = imgwidth * -nextIndex;
// 小圆点改变样式
$.each($("#pages div"),function(index,element){
// 清除所有小圆点的curr样式
$("#pages div").eq(index).removeClass("curr");
});
// 给当前的添加curr样式
$("#pages div").eq(nextIndex).addClass("curr");
nextIndex++;
if(nextIndex>=len){
nextIndex = 0;
}
// 运动
$("#box").animate({
"left":_left,
});
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="box">
<div class="topic">
<img src="img/img1.jpg">
</div>
<div class="topic">
<img src="img/img2.jpg">
</div>
<div class="topic">
<img src="img/img3.jpg">
</div>
<div class="topic">
<img src="img/img4.jpg">
</div>
</div>
<!-- 小圆点的存放位置 -->
<div id="pages"></div>
<!-- 上一张 -->
<div id="prev"><</div>
<!-- 下一张 -->
<div id="next">></div>
</div>
<div id="blogaddress">
更多分享:<a href="http://blog.csdn.net/meiziluleyiguan">
http://blog.csdn.net/meiziluleyiguan
</a>
</div>
</body>
</html>
注:需自己引入jQuery类库以及图片。