Html + CSS +JQuery 实现图片轮播

Html + CSS +JQuery 实现图片轮播

效果图

主要思路：

1. 编写对应html、css代码。将几张图片position：absoute重叠在一起，display：none；仅仅在第一张图片style 样式中display：block；
2. 划出小圆点和左右划动按钮；
3. JQuery部分：定义一个index，当点击对应的小圆点时，对应的图片出现，其他图片隐藏；点击左划动和右划动按钮，index–/index++;作出临界判断，对应的圆点和图片出现 。

HTML代码块：

<span>淡入淡出轮播图（fadeIn、fadeOut）</span>
        <div class="sildShow-fadeInOut">
            <div class="imgBox">
                <img src="img/photo1.jpg" alt="轮播图1" style="display: block;" />
                <img src="img/photo2.jpg" alt="轮播图2" />
                <img src="img/photo3.jpg" alt="轮播图3" />
                <img src="img/photo4.jpg" alt="轮播图4" />
                <img src="img/photo5.jpg" alt="轮播图5" />
                <img src="img/photo6.jpg" alt="轮播图6" />
            </div>
            <div class="dot">
                <div class="white-dot" style="background: red;"></div>
                <div class="white-dot"></div>
                <div class="white-dot"></div>
                <div class="white-dot"></div>
                <div class="white-dot"></div>
                <div class="white-dot"></div>
            </div>
            <div class="right-box">
                <div class="direction left"></div>
            </div>
            <div class="left-box">
                <div class="direction right"></div>
            </div>
        </div>

Css代码块：

.sildShow-fadeInOut{
    position: relative;
    width: 100%;
    height: 240px;
}
.imgBox{
    position: relative;
    width: 100%;
    height: 100%;
}
.imgBox img{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
}
.dot{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 15px;
    left: 40%;
    width: 90px;
    height: 8px;
}
.white-dot{
    flex: 1;
    border: 1px solid white;
    margin-right: 5px;
    height: 100%;
    background-color: white;
    border-radius: 100px;
}
.left-box{
    position: absolute;
    top: 43%;
    left: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    width: 34px;
    height: 40px;
    background-color: rgba(255,255,255,0.1);
    /*background-color: rgba(0,0,0,0.5);*/
}
.direction{
    display: inline-block;
    width: 24px;
    height: 24px;
}
.left{
    margin-top: 5px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-41deg);
    -ms-transform: rotate(-41deg);  /*兼容IE*/
    -webkit-transform: rotate(-41deg);  /*兼容chrome*/
}
.right{
    margin-top: 5px;
    margin-left: 10px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(51deg);
    -ms-transform: rotate(51deg);
    -webkit-transform: rotate(51deg);
}
.right-box{
    position: absolute;
    top: 43%;
    right: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    width: 34px;
    height: 40px;
    background-color: rgba(255,255,255,0.1);
    /*background-color: rgba(0,0,0,0.5);*/
}

JQ代码块：

          var index = 0;
           $('.white-dot').click(function() {
               index = $(this).index();
               $('.imgBox img').eq(index).fadeIn(800).siblings().fadeOut(800);
               $(this).css('background', 'red').siblings().css('background', 'white');
           });
           $('.left-box').click(function() {
               index--;
               if(index < 0) {
                   index = $('.imgBox img').length - 1;
               }
               $('.imgBox img').eq(index).fadeIn(800).siblings().fadeOut(800);
               $('.white-dot').eq(index).css('background', 'red').siblings().css('background', 'white');
           });
           $('.right-box').click(function() {
               index++;
               if(index > $('.imgBox img').length - 1) {
                   index = 0;
               }
               $('.imgBox img').eq(index).fadeIn(800).siblings().fadeOut(800);
               $('.white-dot').eq(index).css('background', 'red').siblings().css('background', 'white');
           });
           //定时转动
           var timer = null;
               timer = setInterval(function() {
                   index++;
                   if(index > $('.imgBox img').length - 1) {
                       index = 0;
                   }
                   if(index < 0) {
                       index = $('.imgBox img').length - 1;
                   }
                   $('.imgBox img').eq(index).fadeIn(800).siblings().fadeOut(800);
                   $('.white-dot').eq(index).css('background', 'red').siblings().css('background', 'white');
               }, 2500);