HTML+jq简单轮播图

.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不太好用

路标： http://www.swiper.com.cn/

swiper4 api ：http://www.swiper.com.cn/api/index.html

转载于:https://www.cnblogs.com/yyr0208/p/9258200.html

• 点赞
• 收藏
• 分享
• 文章举报