基于jquery的简单轮播效果
- 无缝轮播、前进后退、指示器（分页器）
- 使用时注意设置组外层宽高
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css" />
<script src="jquery-1.11.0.js"></script>
<script src="index.js"></script>
<style>
/* 使用此代码，需要手动设置最外层的大小 */
.swiper {
width: 1000px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper">
<!--轮播图-->
<ul class="inner clearfix">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
<!--指示器-->
<ol class="indicators clearfix"></ol>
<!--控制器-->
<div class="control">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
</body>
</html>
css代码
/*初始化*/
*{
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix:after{
content: "";
display: block;
clear: both;
}
ul,ol,li{
list-style: none;
}
/*清楚图片的底部留白*/
img{
vertical-align: middle;
}
/*轮播区域*/
.swiper{
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: pink;
}
/*轮播图*/
.swiper ul.inner{
position: absolute;
left: 0;
top: 0;
height: 100%;
}
.swiper ul.inner li{
float: left;
height: 100%;
}
.swiper ul.inner li:hover{
cursor: move;
}
.swiper ul.inner li img{
width: 100%;
height: 100%;
}
/*指示器*/
.swiper ol.indicators{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
.swiper ol.indicators li{
float: left;
width: 5vw;
height: 5vw;
max-width: 15px;
max-height: 15px;
text-align: center;
cursor: pointer;
background-color: lightgray;
margin: 0 3px;
border-radius: 50%;
border: 3px darkslategray solid;
}
.swiper ol.indicators li.current{
background-color: orange;
border-color: #fff;
}
/*控制器*/
.control span{
vertical-align: middle;
font-size: 32px;
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 45px;
cursor: pointer;
background-color: rgba(255,255,255,0);
border-radius: 5px;
color: #ccc;
}
.control span.prev{
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.control span.next{
right: 10px;
top: 50%;
margin-top: -25px;
}
.control span:hover{
background-color: rgba(0,0,0,.3);
color: white;
}
jquery代码
$(function() {
/* 初始化页面 */
// 轮播总个数
var lists = $(".inner li").length
// 轮播图大小设置
$(".inner").width(100 * (lists + 1) + "%")
$(".inner li").width(100 / (lists + 1) + "%")
// 创建指示器
for (var i = 0; i < lists; i++) {
$("<li></li>").appendTo(".swiper .indicators")
}
$(".indicators li").eq(0).addClass("current")
/*定义参考值*/
var index = 0;
// 每次位移的距离
var step = $(".inner li").width();
/*鼠标选择指示器时，改变指示器状态，图片对应移动*/
$(".indicators li")
.mouseenter(function() {
//鼠标滑过的指示器，添加.current,去掉所有兄弟的.current
$(this).addClass("current").siblings().removeClass("current")
//获取鼠标滑过的为第几个
index = $(this).index()
//轮播图针对性位移：使用动画改变位置，动画执行时间为500ms
$(".inner").stop().animate({
left: -index * step
}, 500)
})
/*实现无缝对接 --将第一张图克隆一份到最后。这样总共有6张图，5个指示器。接下来就是数学运算的过程*/
$(".inner li").eq(0).clone(true).appendTo(".inner")
/*鼠标点击左侧*/
$(".prev").click(function() {
// 每次位移的距离
step = $(".inner li").width();
//定义结束条件：不能一直变大。某个值时将参考值归零，并将整个轮播图瞬间归位
if (index == lists) {
$(".inner").css("left", 0)
index = 0;
}
index++;
//点击之后，参考值加一，图片动画移动
$(".inner").stop().animate({
left: -index * step
}, 500)
//显示最后一张图时，指示器指示第一个，其余情况指示器对应指示
if (index == lists) {
$(".indicators li").eq(0).addClass("current").siblings().removeClass("current")
} else {
$(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
}
})
//右侧点击
$(".next").click(function() {
// 每次位移的距离
step = $(".inner li").width();
//定义结束条件
if (index == 0) {
$(".inner").css("left", -lists * step)
index = lists;
}
index--;
$(".inner").stop().animate({
left: -index * step
}, 500)
$(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
})
//使用定时器，循环点击 左侧按钮
var time = setInterval(function() {
$(".prev").trigger('click')
}, 2000)
//鼠标进入 轮播范围停止轮播，离开之后重新开启轮播
$(".swiper").hover(function() {
clearInterval(time)
}, function() {
time = setInterval(function() {
$(".prev").trigger('click')
}, 2000)
})
})