Web前端JS實現輪播圖原理

實現輪播圖有很多方式，但是html的結構都是一樣的。本文使用了Jquery框架，Dom操作更加方便靈活

html部分：

<div class="banner">
        <ul>
            <li><a href="javascript:;"><img src="Img/1.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/2.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/3.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/4.jpg" /></a></li>
            <li><a href="javascript:;"><img src="Img/5.jpg" /></a></li>
        </ul>
        <div class="arrow">
            <span class="arrow-l"><</span>
            <span class="arrow-r">></span>
        </div>
        <ol>
            <li class="dot"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</div>

 

CSS代碼：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color:#fff;
}
li{
    list-style:none;
}
.banner{
    width:800px;
    height:300px;
    margin:100px auto;
    position:relative;
}

.banner ul li{
    display:none;
    position:absolute;
}
.banner ul li:first-child{
    display:block;
}
.banner ul li a{
    display:block;
}
.banner ul li a img{
    width:800px;
    height:auto;
}

.arrow span {
    width:20px;
    height:30px;
    background:rgba(0,0,0,0.05);
    color:#fff;
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    line-height:30px;
    text-align:center;
    font-size:20px;
    cursor:pointer;
}
.arrow-l{
    left:20px;
}
.arrow-r{
    right:20px;
}
.banner ol{
    position:absolute;
    bottom:20px;
    right:60px;
}
.banner ol li {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    margin-left:12px;
    cursor:pointer;
    border:2px solid rgba(255,255,255,0.3);
}
.banner ol li.dot{
    border:2px solid rgba(0,0,0,0.4);
    background:#fff;
}

 

JS代碼：

<script src="js/jquery.min.js"></script>
<script>
        //切換圖片函數
        function bannerImg(count,Img,dot) {
            //讓索引為count的li元素顯示出來,siblings其他li元素隱藏
            $(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow");
            //切換當前索引的小圓點樣式
            $(dot).eq(count).addClass("dot").siblings("li").removeClass("dot");
        }

        $(function () {
            var count = 0;
            var banImg = $(".banner ul li");
            var bandot = $(".banner ol li");
            //下一張
            $(".arrow-r").click(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            });
            //上一張
            $(".arrow-l").click(function () {
                count--;
                if (count < 0) {
                    count = banImg.length - 2;
                }
                bannerImg(count, banImg, bandot);
            });

            //小圓點控制輪播
            $(bandot).click(function () {
                count = $(this).index();
                bannerImg(count, banImg, bandot);
            })

            //定時器輪播
            var adTimer;
            adTimer = setInterval(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            }, 3000);

            //鼠標移入停止輪播
            $(".banner").mouseover(function () {
                clearInterval(adTimer);
            });
            //鼠標移出開始輪播
            $(".banner").mouseout(function () {
                adTimer = setInterval(function () {
                    count++;
                    if (count == banImg.length) {
                        count = 0;
                    }
                    bannerImg(count, banImg, bandot);
                }, 3000);
            });
        }) 
</script>

 

主要就是JS部分，需要定義一個變量通過li的索引來控制圖片輪播。這里我使用的是Jquery自帶的動畫淡入淡出效果。當然也可以使用animate函數自定義動畫，根據個人喜好吧。淡入淡出效果它不香哦。

效果圖：

 

原文來自：小曾博客