.main{
width: 100%;
min-width: 1100px;
display: table;
margin: 0 auto;
text-align: center;
position: relative;
}
.pic {
width: 100%;
min-width: 1100px;
height: 500px;
z-index: 0;
}
.pic ul {
width: 100%;
height: 100%;
}
.pic ul li {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
top: 0;
right: 0;
}
.pic li img {
width: 100%;
height: 100%;
}
.btn{
width: 300px;
height: 1.5px;
margin: 0 auto;
z-index: 1;
position: relative;
top: -40px;
}
.btn ul {
width: auto;
height: 1.5px;
display: table;
margin: 0 auto;
}
.btn ul li {
width: 37px;
height: 1.5px;
float: left;
list-style: none;
margin: 0 6px;
background: #000;
}
.btn .btn-style{
background-color: yellow;
}
图片,按钮,上下页必须是同级元素
<div class="main">
<div class="pic">
<ul>
<li><img src="img/index/b1.jpg"/></li>
<li style="display: none;"><img src="img/index/b2.jpg"/></li>
<li style="display: none;"><img src="img/index/b3.jpg"/></li>
<li style="display: none;"><img src="img/index/b4.jpg"/></li>
</ul>
</div>
<div class="btn">
<ul>
<li style="background: yellow;"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="btn-next"></div>
<div class="btn-pre"></div>
</div>
$(document).ready(function() {
//使用按钮变色,需要定义.btn-style的样式
Carousel('.pic');
}); function Carousel(car){
var index = 0;
var interval;
var pic = $(car);
var btn = pic.siblings('.btn');
var pre = pic.siblings('.btn-pre');
var next = pic.siblings('.btn-next');
var num = pic.find('li').length; btn.find('ul li').mouseover(function() {
index = $(this).index();
display(index);
}); pre.click(function(){
index--;
if(index < 0) {
index = num;
}
display(index);
}); next.click(function(){
index++;
if(index > num) {
index = 0;
}
display(index);
}); function display() {
pic.find('ul li').eq(index).fadeIn('slow');
pic.find('ul li').eq(index).siblings().fadeOut('fast');
btn.find('ul li').eq(index).addClass('btn-style');
btn.find('ul li').eq(index).siblings().removeClass('btn-style');
} interval = setInterval(function() {
index++;
if(index > num) {
index = 0;
}
display(index);
}, 2000); pic.parent().mouseenter(function() {
clearInterval(interval);
}); pic.parent().mouseleave(function() {
interval = setInterval(function() {
index++;
if(index > num) {
index = 0;
}
display(index);
}, 2000);
});
}
推荐使用swiper插件,手机端很好用,pc端貌似ie不太好用
swiper4 api :http://www.swiper.com.cn/api/index.html