自定义轮播图实现
一、效果预览
使用HTML+CSS+JQuery实现一个功能齐全的轮播图,效果如下:
二、源代码
使用前需要引入以下JS脚本:
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
说明:jquery.lazyload.js是图片懒加载技术,详细使用说明请继续关注本博主。
1.html
<!-- 轮播图开始 -->
<div class="banner">
<div class="swiper">
<ul>
<li>
<img src="holder.js/1920x570?text=hime" data-original="http://localhost/images/2018/07/29/1532840363279173.jpg">
</li>
<li>
<img src="holder.js/1920x570?text=hime" data-original="http://localhost/images/2018/07/29/1532840449999101.jpg">
</li>
</ul>
</div>
<div class="tap">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="btn">
<a class="prev">
<i></i>
</a>
<a class="next">
<i></i>
</a>
</div>
</div>
2、CSS
.banner {
width: 100%;
position: relative;
top: 50px;
}
.banner .swiper ul li {
position: absolute;
}
.banner .tap {
position: relative;
text-align: center;
top: 540px;
}
.banner .tap ul li {
display: inline-block;
background: rgba(128, 128, 128, 0.2);
width: 50px;
height: 2px;
border-radius: 20px;
cursor: pointer;
}
.banner .tap .on {
background-color: #710093;
}
.banner .btn {
position: relative;
display: none;
}
.banner .btn .prev {
float: left;
width: 74px;
height: 74px;
margin: 248px;
background-color: rgba(0, 0, 0, 0.4);
font-size: 30pt;
color: #fff;
text-align: center;
line-height: 74px;
cursor: pointer;
}
.banner .btn .prev i {
display: block;
width: 28px;
height: 51px;
margin-top: 13px;
margin-left: 24px;
color: #fff;
background: url(../img/icon/icon.png) no-repeat 0 0px;
}
.banner .btn .next {
float: right;
width: 74px;
height: 74px;
margin: 248px;
background-color: rgba(0, 0, 0, 0.4);
font-size: 30pt;
color: #fff;
text-align: center;
line-height: 74px;
cursor: pointer;
}
.banner .btn .next i {
display: block;
width: 28px;
height: 51px;
margin-top: 13px;
margin-left: 24px;
color: #fff;
background: url(../img/icon/icon.png) no-repeat -32px 0;
}
3、JS代码
var banner = {
properties: {
index: 0,
sleep: 3000,
fadeTime: 300,
timer: null
},
init: function () {
$('.swiper li').eq(0).show().siblings().hide();
$('.tap li').eq(0).addClass('on').siblings().removeClass('on');
if (banner.properties.timer == null) {
banner.start();
}
banner.prevBtn();
banner.nextBtn();
banner.onHover();
},
start: function () {
banner.properties.timer = setInterval(function () {
banner.properties.index ++;
if (banner.properties.index > banner.size()) {
banner.properties.index = 0;
}
banner.show();
}, banner.properties.sleep);
},
stop: function () {
clearInterval(banner.properties.timer);
},
show: function () {
$('.swiper li').eq(banner.properties.index).fadeIn(banner.properties.fadeTime).siblings().fadeOut(banner.properties.fadeTime);
$('.tap li').eq(banner.properties.index).addClass('on').siblings().removeClass('on');
},
size: function () {
return $('.swiper li').length;
},
prevBtn: function () {
$('.btn .prev').click(function () {
banner.stop();
if (banner.properties.index == 0) {
banner.properties.index = banner.size();
}
banner.properties.index --;
banner.show();
banner.start();
});
},
nextBtn: function () {
$('.btn .next').click(function () {
banner.stop();
if (banner.properties.index == banner.size() - 1) {
banner.properties.index = -1;
}
banner.properties.index ++;
banner.show();
banner.start();
});
},
onHover: function () {
$('.tap li').hover(function () {
banner.properties.index = $(this).index();
banner.show();
if (banner.properties.timer != null) {
banner.stop();
}
}, function () {
banner.start();
});
$('.banner').hover(function () {
$('.btn').show();
}, function () {
$('.btn').hide();
});
}
}
banner.init();