轮播图的两种方式

轮播图的两种方式

1、用数组存储位置信息（JS）

内容

<div id="container">
    <a href="#" id="last">&lt</a>
    <a href="#" id="next">&gt</a>
    <img id="picture" onmouseover="doStop()" onmouseout="doStart()" src="./images/05.jpg">
    <div id="s1">
        <a id="a1" class="dian" href="#"></a>
        <a id="a2" class="dian" href="#"></a>
        <a id="a3" class="dian" href="#"></a>
        <a id="a4" class="dian" href="#"></a>
        <a id="a5" class="dian" href="#"></a>
    </div>
</div>

style部分

<style>
    #container {
        margin-left: 100px;
        width: 800px;
        height: 600px;
    }

    #picture {
        width: 800px;
    }

    #last,
    #next {
        text-decoration: none;
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 32px;
        font-size: 40px;
        top: 280px;
        background-color: #ddd;
        opacity: 0.5;
    }

    #last {
        left: 115px;
    }

    #next {
        left: 850px;
    }

    .dian {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ddd;
        display: block;
        float: left;
        margin-left: 5px;
        opacity: 0.5;
    }

    .dian:hover {
        background-color: white;
        opacity: 1;
    }

    #s1 {
        position: absolute;
        left: 130px;
        top: 580px;
    }
</style>

JS部分

<script>
    //定义图片数组
    let imgArr = ['./images/01.jpg', './images/02.jpg', './images/03.jpg', './images/04.jpg', './images/05.jpg'];//将图片地址放入数组
    var index = 0;
    var mytime = null;
    var picture = document.getElementById("picture")
    function add() {
        picture.src = imgArr[index]//将数组信息放入img.src中
    }
    function doStart() {
        if (mytime == null) {
            mytime = setInterval(function () {
                index++;
                if (index === imgArr.length) {//当放到最后一张图片时重新循环
                    index = 0;
                }
                add();
            }, 2000);
        }
    }
    function doStop() {//鼠标移入暂停循环
        if (mytime != null) {
            clearInterval(mytime);
            mytime = null;
        }
    }
    doStart();
    //左箭头
    //var last = document.getElementById("last")
    last.onclick = function () {
        index--;
        if (index === -1) {//第一张图片左走切换到最后一张图片
            index = imgArr.length - 1;
        }
        add();
    }
    //右箭头
    //var next = document.getElementById("next")
    next.onclick = function () {
        index++;
        if (index === imgArr.length) {//最后一张图片右走切换到第一张图片
            index = 0;
        }
        add();
    }
    var a1 = document.getElementById("a1")
    a1.onclick = function () {//给第一个点添加点击事件
        index = 0;
        add();
    }
    var a2 = document.getElementById("a2")
    a2.onclick = function () {//给第二个点添加点击事件
        index = 1;
        add();
    }
    var a3 = document.getElementById("a3")
    a3.onclick = function () {//给第三个点添加点击事件
        index = 2;
        add();
    }
    var a4 = document.getElementById("a4")
    a4.onclick = function () {//给第三个点添加点击事件
        index = 3;
        add();
    }
    var a5 = document.getElementById("a5")
    a5.onclick = function () {//给第三个点添加点击事件
        index = 4;
        add();
    }
</script>

2、隐藏显示图片（jQuery）

style

<style>
    #last,
    #next {
        text-decoration: none;
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 32px;
        font-size: 40px;
        top: 280px;
        background-color: #ddd;
        opacity: 0.5;
    }

    #last {
        left: 115px;
    }

    #next {
        left: 860px;
    }

    #did {
        margin-left: 100px;

        width: 800px;
        height: 600px;
    }

    #did img {
        display: none;
    }

    #did img:first-child {
        display: block
    }

    .dian {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
        display: block;
        float: left;
        margin-left: 5px;
        opacity: 0.5;
    }

    .dian:hover {
        background-color: white;
        opacity: 1;
    }

    #s1 {
        position: absolute;
        left: 130px;
        top: 580px;
    }
</style>

盒子内容

<div id="did">
    <a href="#" id="last">&lt</a>
    <a href="#" id="next">&gt</a>
    <div>
        <img src="./images/01.jpg" width="800" />
        <img src="./images/02.jpg" width="800" />
        <img src="./images/03.jpg" width="800" />
        <img src="./images/04.jpg" width="800" />
        <img src="./images/05.jpg" width="800" />
    </div>
    <div id="s1">
        <a id="a1" class="dian" href="#"></a>
        <a id="a2" class="dian" href="#"></a>
        <a id="a3" class="dian" href="#"></a>
        <a id="a4" class="dian" href="#"></a>
        <a id="a5" class="dian" href="#"></a>
    </div>
</div>

JS

$(function () {
    var m = 1;
    var mytime = null;
    var mlist = document.getElementsByTagName("img");
    //定义函数展示对应的图片
    function show(mm) {
        for (var i = 0; i < mlist.length; i++) {
            if (m == i + 1) {
                mlist[i].style.display = "block";
            } else {
                mlist[i].style.display = "none";//除第m张图，其他图片不显示
            }
        }
    }
    function doStart() {//开启轮播图片
        if (mytime == null) {
            mytime = setInterval(function () {
                m++;
                show(m);//显示第m张图
                if (m >= 5) {//到第5张图后回到第一张图
                    m = 0;
                }
            }, 1000);
        }
    }
    doStart();
    
    $("#did").mouseleave(function () {//鼠标移出事件 开始播放图片
        doStart();
    });
    $("#did").mouseover(function () {//鼠标移入事件 停止轮播图片
        if (mytime != null) {
            clearInterval(mytime);
            mytime = null;
        }
    });
    //左箭头
    $("#last").click(function () {
        m--;
        if (m === 0) {//第一张图片左走切换到最后一张图片
            m = mlist.length;
        }
        show(m);
    });
    //右箭头
    $("#next").click(function () {
        m++;
        if (m === mlist.length + 1) {//最后一张图片右走切换到第一张图片
            m = 1;
        }
        show(m);
    });
    $("#a1").click(function () {//按钮1点击切图
        m = 1;
        show(m);
    });
    $("#a2").click(function () {//按钮2点击切图
        m = 2;
        show(m);
    });
    $("#a3").click(function () {//按钮3点击切图
        m = 3;
        show(m);
    });
    $("#a4").click(function () {//按钮4点击切图
        m = 4;
        show(m);
    });
    $("#a5").click(function () {//按钮5点击切图
        m = 5;
        show(m);
    });
});

注意：

使用 herf 时 “” 内填入 “#” 可以使页面不发生跳转。