CSS:
.lunbo {
padding: 0px 15px;
margin-top: 20px;
}
.lunbo-wrap {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
box-shadow: -0.5px 0.5px 5px 1px #ccc;
border-radius: 0.08rem;
}
.lunbo-wraps {
width: 100%;
height: 100px;
}
.lunbo-wraps img {
width: 100%;
height:100%;
float: left;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.lunbo-page {
width: 100%;
position: absolute;
bottom: 10px;
text-align: center;
}
.lunbo-page span {
display: inline-block;
width: 8px;
height: 2px;
text-align: center;
line-height: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
margin-left: 10px;
cursor: pointer;
}
.lunbo-page span.current {
background: #ffffff;
}
HTML:
<div class="lunbo">
<div class="lunbo-wrap">
<div class="lunbo-wraps">
<img src="../assets/images/lunbo01.jpg" />
<img src="../assets/images/lunbo02.jpg" />
<img src="../assets/images/lunbo03.jpg" />
</div>
<p class="lunbo-page"></p>
</div>
</div>
Jquery:
<script>
$(function () {
$(".lunbo-wraps img:not(:first)").hide();
var index = 0;
var s = $(".lunbo-wraps img").length;
var auto;
var checkTime = 0;
for (var i = 1; i <= s; i++) {
$(".lunbo-page").append("<span></span>");
}
$(".lunbo-page span:first").addClass("current");
$(".lunbo-page span").on("click", function () {
index = $(this).index();
move();
});
function autos() {
auto = setInterval(function () {
index++;
if (index == s) {
index = 0;
}
move();
}, 3000);
}
autos();
function move() {
$(".lunbo-page span").eq(index).addClass("current").siblings().removeClass('current');
$(".lunbo-wraps img").eq(index).stop(true, true).fadeIn().siblings().stop(true, true).fadeOut();
}
$("#left").click(function () {
clearInterval(auto);
index--;
if (index <= -1) {
index = s - 1;
}
move();
autos();
});
$("#right").click(function () {
clearInterval(auto);
index++;
if (index >= s) {
index = 0;
}
move();
autos();
});
$(".lunbo-wraps img, .lunbo-page span").mouseover(function () {
clearInterval(auto);
}).mouseout(function () {
autos();
});
});
</script>
jquery完美实现轮播图
最新推荐文章于 2024-03-27 23:42:14 发布