话不多说，先呈上一副完整的代码：
//css代码
<style>
html,body{
padding: 0;
margin: 0;
}
body .shuffling {
position: relative;
height: 336px;
overflow: hidden;
}
body .shuffling .prev-btn, body .shuffling .next-btn {
position: absolute;
top: 50%;
height: 66px;
width: 34px;
background-color: rgba(238,238,238,0.4);
z-index: 10;
margin-top: -33px;
cursor: pointer;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
body .next-btn img{
opacity: 0.7;
}
body .prev-btn img{
opacity: 0.7;
}
body .shuffling .prev-btn {
left: 0;
}
body .shuffling .next-btn {
right: 0;
}
body .shuffling .item-img {
height: 336px;
cursor: pointer;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
width: 100%;
background-size: cover;
background-position: center center;
}
body .shuffling:hover .prev-btn{
opacity: 1;
}
body .shuffling:hover .next-btn{
opacity: 1;
}
body .shuffling .item-img:nth-of-type(1) {
background-image: url("img/banner-1.jpg");
}
body .shuffling .item-img:nth-of-type(2) {
background-image: url("img/banner-2.jpg");
}
body .shuffling .item-img:nth-of-type(3) {
background-image: url("img/banner-3.jpg");
}
body .shuffling .item-img:nth-of-type(4) {
background-image: url("img/banner-4.jpg");
}
body .shuffling .img-active {
visibility: visible;
opacity: 1;
}
body .shuffling .round {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
text-align: center;
}
body .shuffling .round span {
display: inline-block;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
cursor: pointer;
margin: 2px;
}
body .shuffling .round .on-hover, body .shuffling .round .onhover {
width: 60px;
border-radius: 10px;
position: relative;
}
body .shuffling .round .on-hover:after {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 0;
height: 4px;
border-radius: 4px;
background-color: white;
-webkit-transition: all 5s;
transition: all 5s;
-webkit-animation: widthAll linear 5s infinite;
animation: widthAll linear 5s infinite;
}
@-webkit-keyframes widthAll {
0% {
width: 0;
}
50% {
width: 29px;
}
100% {
width: 58px;
}
}
@keyframes widthAll {
0% {
width: 0;
}
50% {
width: 29px;
}
100% {
width: 58px;
}
}
</style>
//html代码
<body>
<div class="shuffling hidden-xs hidden-sm">
<div class="item-img img-active" data-index-value="1"></div>
<div class="item-img" data-index-value="2"></div>
<div class="item-img" data-index-value="3"></div>
<div class="item-img" data-index-value="4"></div>
<div class="round">
<span class="on-hover" data-index-value="1"></span>
<span data-index-value="2"></span>
<span data-index-value="3"></span>
<span data-index-value="4"></span>
</div>
<div class="prev-btn">
</div>
<div class="next-btn">
</div>
</div>
</body>
//js代码
<script>
/*轮播图模块*/
var time = "";
var index = 1;
$(function () {
showimg(index);
$(".round span,.block").hover(function () {
clearTimeout(time);
var icon=$(this).attr('data-index-value');
$(".round span").removeClass("on-hover").eq(icon-1).addClass("onhover");
$(".shuffling .item-img").removeClass('img-active').eq(icon-1).addClass('img-active');
}, function () {
var icon=$(this).attr('data-index-value');
$(".round span").removeClass("onhover").eq(icon-1).addClass('on-hover');
index=$(this).attr('data-index-value')> 3 ? 1 :parseInt($(this).attr('data-index-value'))+1;
time = setTimeout("showimg(" + index + ")", 5000);
});
$('.prev-btn').on('click',function () {
clearTimeout(time);
var index = $('.on-hover').attr('data-index-value');
if(index == '1'){
each_img(4);
each_round(4);
}else{
each_img(index-1);
each_round(index-1);
}
});
$('.next-btn').on('click',function () {
clearTimeout(time);
var index = $('.on-hover').attr('data-index-value');
if(index == '4'){
each_round(1);
each_img(1);
}else{
each_round(parseInt(index)+1);
each_img(parseInt(index)+1);
}
})
});
function showimg(num) {
index = num;
$(".round span").removeClass("on-hover").eq(index-1).addClass("on-hover");
$(".shuffling .item-img").removeClass('img-active').eq(index-1).addClass('img-active');
index = index + 1 > 4 ? 1 : index + 1;
time = setTimeout("showimg(" + index + ")", 5000);
}
function each_round(num) {
$('.round span').each(function () {
var self = $(this);
if($(self).attr('data-index-value') == num){
$(self).addClass('on-hover');
}else{
$(self).removeClass('on-hover');
}
})
}
function each_img(num) {
$('.item-img').each(function () {
var self = $(this);
if($(self).attr('data-index-value') == num){
$(self).addClass('img-active').siblings().removeClass('img-active');
index=$(self).attr('data-index-value')> 3 ? 1 :parseInt($(self).attr('data-index-value'))+1;
time = setTimeout("showimg(" + index + ")", 5000);
}
});
}
</script>
效果图大家可以先去http://ipaiban.com
这里需要注意的是：
1.想要淡入淡出的效果，一开始隐藏图必须使用visibility: hidden;这个属性，而不能使用display，不然达不到这种效果；
2.js中的计时器必须及时清零；
3.其实原理非常简单，主要是思想，大家看一下代码片段就明白了。
（复制替换图片可直接使用）
网友评论