通过javascript实现图片轮播效果

以下文案均为原创，若借鉴后有得到启发，希望点个赞。若有错误之处，或者可以用更好的方式解决，可以留言评论。

地址：https://mp.csdn.net/postedit/83063209

以下方法均实现图片轮播的效果，层层递进关系。

第一种方式：

在js里通过索引的方式实现。

①先设置图片的名称，分别从t1.jpg到t7.jpg(共8张图片)

②设置索引为0，若索引能被8整除，则令索引为0。实现重复更换图片的效果

③使用document.getElementById()，通过指定的Id来获得html对象

④通过对象.src属性得到图片的URL

⑤最后通过setInterval按照指定的周期(2s)来调用函数，实现图片轮播效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动效果</title>
</head>
    <style type="text/css">
        #adv {
            width: 590px;
            height: 470px;
        }

    </style>
    <script type="text/javascript">
        index = 0;
        function rollImage() {
            index++;
            if (index%8===0) {
                index = 0;
            }
            adv = document.getElementById("adv");
            adv.src ='../image/t' + index + '.jpg'
        }
        setInterval(rollImage,2000)
    </script>
<body>
    <img id="adv" src="../image/t0.jpg">
</body>
</html>

第二种方式：

在第一种方式的前提下，又实现了圆圈点中会选中对应的图片以及点击左右两边的图标实现图片的切换。

（1）实现圆圈点中会选中对应的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动效果</title>
    <style type="text/css">
        #adv {
            width: 590px;
            height: 470px;
            background-image: url("../image/t1.jpg");
        }
        #nav {
            width: 400px;
            height: 20px;
            /*border: 1px solid black;*/
            list-style-type: none;
            margin-top: 190px;
            line-height: 20px;
        }
        #nav li {
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 50%;
            border: 2px solid red;
            margin: 5px 7px;
        }
    </style>
    <script type="text/javascript">
        index = 0;
        function rollImage() {
            index++;
            if (index%8===0) {
                index = 0;
            }
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeIndex(i) {
            clearInterval(inter);
            index = i;
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeBg(index) {
            nav = document.getElementById("nav");
            lis = nav.children;
            for (i=0; i<lis.length; i++) {
                lis[i].style.background = "hsla(0,0%,100%,.2)";
            }
            lis[index].style.background = "red";
        }
        function roll() {
            inter = setInterval(rollImage,2000);
        }
        var inter = setInterval(rollImage,2000);
    </script>
</head>
<body>
    <div id="adv">&nbsp;
        </ul>
        <ul id="nav">
            <li onmouseover="changeIndex(0)" onmouseout="roll()" style="background:red"></li>
            <li onmouseover="changeIndex(1)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(2)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(3)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(4)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(5)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(6)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(7)" onmouseout="roll()"></li>
        </ul>
    </div>
</body>
</html>

（2）点击左右两边的图标实现图片的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动效果</title>
    <style type="text/css">
        #btn {
            padding: 0;
            margin: 180px 0 0 0;
            width: 590px;
            height: 40px;
            /*border: 1px solid blue;*/
            list-style-type: none;

        }
        #btn li {
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*border: 1px solid black;*/
            color: #ccc;
            background-color: hsla(0, 0%, 100%, .2);
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
    <script type="text/javascript">
        index = 0;
        function changeBg(index) {
            nav = document.getElementById("nav");
            lis = nav.children;
            for (i=0; i<lis.length; i++) {
                lis[i].style.background = "hsla(0,0%,100%,.2)";
            }
            lis[index].style.background = "red";
        }
        function changeImage(flag) {
            clearInterval(inter);
            if (flag==="l") {
                index--;
            }else {
                index++;
            }
            if (index===-1) {index=7;}
            if (index===8) {index=0;}
            adv =document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeBtnbg(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .8)";
        }
        function rollBtn(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .2)";
        }
        var inter = setInterval(rollImage,2000);
    </script>
</head>
<body>
    <div id="adv">&nbsp;
        <ul id="btn">
            <li class="left" onclick="changeImage('l')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&lt;</li>
            <li class="right" onclick="changeImage('r')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&gt;</li>
        </ul>
    </div>
</body>
</html>

（3）两者结合实现的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动效果</title>
    <style type="text/css">
        #adv {
            width: 590px;
            height: 470px;
            background-image: url("../image/t1.jpg");
        }
        #nav {
            width: 400px;
            height: 20px;
            /*border: 1px solid black;*/
            list-style-type: none;
            margin-top: 190px;
            line-height: 20px;
        }
        #nav li {
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 50%;
            border: 2px solid red;
            margin: 5px 7px;
        }
        #btn {
            padding: 0;
            margin: 180px 0 0 0;
            width: 590px;
            height: 40px;
            /*border: 1px solid blue;*/
            list-style-type: none;

        }
        #btn li {
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*border: 1px solid black;*/
            color: #ccc;
            background-color: hsla(0, 0%, 100%, .2);
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
    <script type="text/javascript">
        index = 0;
        function rollImage() {
            index++;
            if (index%8===0) {
                index = 0;
            }
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeIndex(i) {
            clearInterval(inter);
            index = i;
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeBg(index) {
            nav = document.getElementById("nav");
            lis = nav.children;
            for (i=0; i<lis.length; i++) {
                lis[i].style.background = "hsla(0,0%,100%,.2)";
            }
            lis[index].style.background = "red";
        }
        function changeImage(flag) {
            clearInterval(inter);
            if (flag==="l") {
                index--;
            }else {
                index++;
            }
            if (index===-1) {index=7;}
            if (index===8) {index=0;}
            adv =document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function roll() {
            inter = setInterval(rollImage,2000);
        }
        function changeBtnbg(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .8)";
        }
        function rollBtn(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .2)";
        }
        var inter = setInterval(rollImage,2000);
    </script>
</head>
<body>
    <div id="adv">&nbsp;
        <ul id="btn">
            <li class="left" onclick="changeImage('l')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&lt;</li>
            <li class="right" onclick="changeImage('r')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&gt;</li>
        </ul>
        <ul id="nav">
            <li onmouseover="changeIndex(0)" onmouseout="roll()" style="background:red"></li>
            <li onmouseover="changeIndex(1)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(2)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(3)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(4)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(5)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(6)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(7)" onmouseout="roll()"></li>
        </ul>
    </div>
</body>
</html>

第三种方式：

使用jQuery实现。作用：代码量精简

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #adv{
            height: 470px;
            width: 590px;
            margin-top: 0px;
            background-image: url("../image/t0.jpg");
        }
        #nav{
            list-style: none;
            width: 300px;
            height: 20px;
            margin-top:190px ;
        }
        #nav li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid red;
            float: left;
            margin: 5px 7px;
        }
        #btn{
            width: 590px;
            height: 40px;
            padding: 0px;
            margin: 180px 0px 0px 0px;
            list-style: none;
        }
        #btn li{
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #ccc;
            background-color: hsla(0,0%,100%,.2);
        }
        .lf{
            float: left;
        }
        .rt{
            float: right;
        }
        .active{
            background: red
        }
    </style>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        index = 0
        function roleImage() {
            index++
            if(index%8==0){
                index = 0
            }
            $("#adv").css("background-image","url('../image/t"+index+".jpg')")
            changebg(index)
        }
        function changebg(index) {
            $("#nav li").css("background","hsla(0,0%,100%,.2)")
            $("#nav li").eq(index).css("background","red")
        }
        function changeIndex(i){
            clearInterval(inter)
            index = i
            adv = document.getElementById("adv")
            adv.style.backgroundImage="url('../image/t"+index+".jpg')"
            changebg(index)
        }
        function changeImage(flag) {
            clearInterval(inter)
            if(flag=='l')
                index--
            else
                index++
            if(index==-1){index=7}
            if(index==8){index=0}
            $("#adv").css("background-image","url('../image/t"+index+".jpg')")
            changebg(index)
        }
        $(function(){
            $("#nav li").mouseover(function(){
                clearInterval(inter)
                var i = $("#nav li").index(this);
                index = i
                $("#adv").css("background-image","url('../image/t"+index+".jpg')")
                changebg(index)
            })
            $("#nav li").mouseout(function () {
                 inter = setInterval(roleImage,2000)
            })
             $("#btn li").mouseover(function () {
                clearInterval(inter)
                 $(this).css("background","hsla(0,0%,100%,.8)")
            })
             $("#btn li").mouseout(function () {
                inter = setInterval(roleImage,2000)
                 $(this).css("background","hsla(0,0%,100%,.2)")
            })
        })
        var inter = setInterval(roleImage,2000)
    </script>
</head>
<body>
<div id="adv">&nbsp;
    <ul id="btn">
        <li class="lf" onclick="changeImage('l')">&lt;</li>
        <li class="rt" onclick="changeImage('r')">&gt;</li>
    </ul>
    <ul id="nav">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

date: 2018-10-15

authon: cymx66688

通过javascript实现图片轮播效果

猜你喜欢