效果图
html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<title>轮播</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="scrollPics">
<!-- 图片布局开始 -->
<ul class="slider" >
<li><img src="imgs/image1.jpg"></li>
<li><img src="imgs/image2.jpg"></li>
<li><img src="imgs/image3.jpg"></li>
<li><img src="imgs/image4.jpg"></li>
<li><img src="imgs/image5.jpg"></li>
</ul>
<!-- 图片布局结束 -->
<!-- 按钮开始 -->
<ul class="showBtn" >
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右两边的按钮 -->
<ul class="prev-next">
<li><img src="imgs/none.png"></li>
<li><img src="imgs/none.png"></li>
</li>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
css文件
*{
margin:0;
padding:0;
font-size: 16px;
}
ul,li{
list-style: none;
}
.slider{
100%;
height: 730px;
position: relative;
overflow: hidden;
}
.slider ul{
100%;
position: relative;
}
.slider li{
100%;
float: left;
overflow: hidden;
}
.slider img{
100%;
}
.slider ul:after{
content: "";
clear: both;
}
.showBtn{
400px;
margin: 0 auto;
position: relative;
text-align: center;
font-size: 2rem;
line-height: 3rem;
overflow: hidden;
margin-top: -4rem;
opacity: 0.5;
}
.showBtn li{
cursor: pointer;
display: block;
float: left;
50px;
height: 50px;
background: #E6E3E3;
/* color: #42A5EF; */
border-radius: 25px;
margin-left: 1rem;
}
.showBtn .on{
background: #2BC5CE;
}
.prev-next li:nth-of-type(1){
position: absolute;
display: inline-block;
top: 300px;
left: 2rem;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.prev-next img {
80px;
}
.prev-next li:nth-of-type(2){
position: absolute;
display: inline-block;
top: 300px;
right: 2rem;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
-o-transform:rotate(-90deg); /* Opera */
}
js代码
$(function(){
var picWidth = $('.slider li').width(), //获取图片的宽度
picNum = $('.slider li').length,//获取图片的数量
index = 0,
timer = null,//设置定时器
showNum = $('.showBtn').find('li'), //获取显示的按钮
prev = $('.prev-next li').eq(0), //获取前一页的按钮
next = $('.prev-next li').eq(1); //获取下一页的按钮
console.log( picNum);
showNum.on('mouseover',function(){
$(this).addClass('on').siblings().removeClass('on');
var iNum = $(this).index(); //获取当前触发事件的按钮的下标；
index = iNum;//把当前触发事件的下标给自动轮播的下标，就会从触发事件之后的按钮爱开始轮播了；
$('.slider li').eq(iNum).css('display','block').siblings().css('display','none');
});
prev.on('click',function(){
var prevIndex = index-1;
if(prevIndex<0){
prevIndex = picNum-1; //如果是第一页往前翻就回到最后一页
}
index = prevIndex; //把当前触发事件的下标给轮播的下标
$('.slider li').eq(prevIndex).css('display','block').siblings().css('display','none');
showNum.eq(prevIndex).addClass('on').siblings().removeClass('on'); //显示上一页所对应的按钮的显示
// clearInterval(timer);
});
next.on('click',function(){
var nextIndex = index+1;
if(nextIndex>=picNum){
nextIndex = 0; //如果是第一页往前翻就回到最后一页
}
index = nextIndex; //把当前触发事件的下标给轮播的下标
$('.slider li').eq(nextIndex).css('display','block').siblings().css('display','none');
showNum.eq(nextIndex).addClass('on').siblings().removeClass('on'); //显示上一页所对应的按钮的显示
// clearInterval(timer);
});
//设置定时器，定时切换图片
timer = setInterval(function(){
index++;
if(index>=picNum){
index = 0;
}
$('.slider li').eq(index).css('display','block').siblings().css('display','none');
showNum.eq(index).addClass('on').siblings().removeClass('on');
// showNum.eq(index).trigger('mouseover');
// showNum.eq(index).trigger('click');
},4000);
})