jQuery图片轮播效果
平丘君 人气:0jQuery是对JavaScript的简化，语法没有太大区别，比较JavaScript更加容易理解，代码量更少。
用jQuery实现图片轮播需要有以下步骤：
1.对图片区域获取，想象中我们所用的图片是按照顺序排列起来，按照一定的时间切换图片的位置来实现轮播
2.对左右两个按钮设置监听，当点击按钮时，要切换到前一张或者后一张
3.对图片底部的小圆点设置监听事件，当点击小圆点时，切换到相应的图片位置，而且小圆点也要点亮
4.对图片整体设置定时器，让图片自己轮播，再设置一个监听函数，让鼠标在图片区域悬停的时候停止定时器，挪开的之后继续轮播。
html+css区域代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*让<body有20px的内边距*/
body {
padding: 20px;
}
/*最外围的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}
/*包含所有图片的<div>*/
#list {
width: 4200px; /*7张图片的宽: 7*600 */
height: 400px;
position: absolute; /*绝对定位*/
z-index: 1;
}
/*所有的图片<img>*/
#list img {
float: left; /*浮在左侧*/
}
/*包含所有圆点按钮的<div>*/
#pointsDiv {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圆点<span>*/
#pointsDiv span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一个<span>*/
#pointsDiv .on {
background: orangered;
}
/*切换图标<a>*/
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}
/*鼠标移到切换图标上时*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
/*鼠标移到整个div区域时*/
#container:hover .arrow {
display: block; /*显示*/
}
/*上一个切换图标的左外边距*/
#prev {
left: 20px;
}
/*下一个切换图标的右外边距*/
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
</div>
<div id="pointsDiv">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>jsp相关代码：
//导入jQuery库
<script src="jquery-1.10.1.js"></script>
<script>
//得到所有照片的div
var $div = $('#list');
var $span = $('#pointsDiv>span')
//获取照片当前的位置
var index = 1;
var isToggleImagEnd = true;
//点击按键往左移动
$('#prev').click(function () {
isToggleImg(0)
});
//点击按键往右移动
$('#next').click(function () {
isToggleImg(1)
});
function isToggleImg(n) {
if (isToggleImagEnd) {
isToggleImagEnd = false;
if (n == 0) {
index--;
} else {
index++;
}
$div.animate({
left: index * (-600)
}, 500, function () {
if (index == 0) {
index = 5
}
if (index == 6) {
index = 1;
}
//设置图片轮播时，从最后一张跳到第一张不会有间隙，跟其他图片一样跳转
$div.css('left', index * (-600))
//设置图片下面的圆点状态，更改其类属性
$span.removeClass('on');
$($span.get(index - 1)).addClass('on')
isToggleImagEnd = true;
})
}
}
//设置延时函数，让图片自己定时轮播下一张
var interval = setInterval(function () {
isToggleImg(1);
}, 1000)
//鼠标图片上图片停止轮播，挪开继续轮播
$("#container").hover(function () {
clearInterval(interval)
}, function () {
interval = setInterval(function () {
isToggleImg(1);
}, 1000)
})
//对小圆点设置监听事件，点击小圆点，图片跳转
$span.click(function () {
index = $(this).index();
isToggleImg()
})
</script>加载全部内容