图片轮播（也可以通过点击下标播放对应的图片）

Posted WingedGirl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播（也可以通过点击下标播放对应的图片）相关的知识，希望对你有一定的参考价值。

示例代码：

<html>
<head>
<!--http://www.jb51.net/article/64662.htm   -->
<style type="text/css">
   body{
    margin:0px;   <!--这两句必写，避免在不同浏览器中显示时发生错位-->
    padding:0px;
   }
   img{ width:320px;height:200px;}
   ul li{ 
    list-style:none;
    float:left;
    padding:5px;
    margin-right:5px;
    border:1px solid gray;
   }
   ul{
    position:relative;
    margin-right:10px;
    margin-top:20px;
   }
   .dq{
        background-color:red;
        color:white;
   }
   
   
</style>
</head>
<body>

    <div id="imglunbo">
        <img id="imgDemo" src= "1.jpg"/>
    </div>

    <script>
    //把数字弄出来
        var imgs = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
        //依据图片数组的数量，创建一个ul。里面包含数组数量的li
        function createImageNums(){
            var myul = document.createElement("ul");
            for(var i=1;i <= imgs.length;i++){
                var myli = document.createElement("li");
                var mynum = document.createTextNode(i);
                
                if(i==1){
                    myli.setAttribute("class","dq");
                }
                
                myul.appendChild(myli);
                myli.appendChild(mynum);
                //因为要实现点击li时，理解切换
                //所以这里给li添加了一个onclick单击事件
                myli.onclick = qiehuan;
            }
            var imglunbo = document.getElementById("imglunbo");
            imglunbo.appendChild(myul);
        } //createImageNums end
        createImageNums();
    
    //自动切换图片
    var currentIndex = 0;//当前的图片在数组中的索引值
    function changeImg(){
        var myimg = document.getElementById("imgDemo");
        myimg.src = imgs[currentIndex];
        
        changestyle(currentIndex);
        
        currentIndex++;
        //因为不断增加会导致索引越界，所以需要归0
        if(currentIndex==imgs.length){
            currentIndex = 0;
        }
        
    }
    function changestyle(num){
        var allli=document.getElementsByTagName("li");
        for(var i=0;i<allli.length;i++){
            allli[i].setAttribute("class","");
        }
        allli[num].setAttribute("class","dq");
    }
    var autoChange = setInterval(changeImg,3000);
    
    //3.点击数字时，立即切换图片
    //     切换成功之后，自动切换图片的功能还能生效
    function qiehuan(){
    //假定10秒自动，此时刚切换图片之后
    //过了3秒，如果点击数字切换，不清掉定时器
    //就会导致7秒之后又自动切换
        clearInterval(autoChange);
    
        var clickedNum = parseInt(this.innerText);
        currentIndex = clickedNum-1;
        console.log(currentIndex);
        
        changeImg();
        autoChange = setInterval(changeImg,3000);
    }
    
    
    </script>
</body>


</html>

运行结果：

 

以上是关于图片轮播（也可以通过点击下标播放对应的图片）的主要内容，如果未能解决你的问题，请参考以下文章

网页轮播图

轮播图案例

案例：网页轮播图

案例：网页轮播图

原生js解决图片点击左右切换（简单轮播图）

网页设计 图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？