JS简单的几种静态轮播方式

今天博主想就我学习到的微薄知识，和大家讨论一下js中的图片轮播。
首先了解一下博主知道的几种轮播的方式（比较通俗的解释）：

• 第一种随着图片的改变，下面的原点也跟着变
• 第二种鼠标点击小圆点，图片跟着改变
• 第三种点击小图片，大图片跟着改变
• 第四种点击左右箭头，图片进行轮播

那么接下来介绍第一种：

• CSS样式：

<style>
        *{padding: 0;margin: 0;border: none;list-style: none;}
        #box{width: 150px;height: 200px;position: relative;}
        #box #list{width: 150px;height: 50px;position: absolute;left: 50%;bottom:10px;margin-left: -75px;}
        #box #list li{width: 14px;height: 14px;border-radius: 7px;background: #ccc;margin-left: 10px;float: left;}
        #box #list li:hover{background: red;cursor: pointer;}
        #box #list .bg{background: red;}
    </style>

• HTML代码：

 <div id="box">
        <img src="img/13.png" alt="" onclick="f()" id="pic"/>
        <ul id="list">
            <li class="bg"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

这里博主就不详细解释css，html了，有问题可以给我留言，那么详细介绍js部分

<script>
        var i=0;
        function f(){
            var arr=["img/13.png","img/14.png","img/15.png","img/16.png"];
            i++;
            if(i>=arr.length){
                i=0;
            }
            var pic=document.getElementById("pic");
            pic.src=arr[i];
            var list=document.getElementById("list");
            var li=list.getElementsByTagName("li");
            for(var j=0;j<li.length;j++){
                li[j].className=" ";
            }
            li[i].className="bg";

        }
    </script>

我们来分析：
首先我们要定义一个图片的数组（这里博主选用了四张图片）；先来实现图片的变换，在函数外部定义一个变量赋值，这里强调一下一定要是函数外部，如果定义在函数里面的话，那么程序只将执行一次利用变量自增的关系和数组长度的比较来实现图片循环的变换；
然后实现圆点的变换，图片轮播到第几个那么对应的圆点就会变色，所以先使所有的圆点都默认为原来的颜色，也就是for循环所写的，再利用i这个变量实现颜色的变换

最终效果


接下来是第二种：
CSS样式：

  *{padding: 0;margin: 0;border: none;list-style: none;}
        #box{width: 150px;height: 200px;position: relative;}
        #box #list{width: 150px;height: 50px;position: absolute;left: 50%;bottom:10px;margin-left: -75px;}
        #box #list li{width: 14px;height: 14px;border-radius: 7px;background: #ccc;margin-left: 10px;float: left;}
        #box #list li:hover{background: red;cursor: pointer;}
        #box #list .bg{background: red;}

HTML代码：

<div id="box">
    <img src="img/13.png" alt="" id="pic"/>
    <ul id="list">
        <li  onclick="f(0)" class="bg"></li>
        <li  onclick="f(1)"></li>
        <li  onclick="f(2)"></li>
        <li  onclick="f(3)"></li>
    </ul>
</div>

JS部分：

 function f(j){
            var arr=["img/13.png","img/14.png","img/15.png","img/16.png"];
            var pic=document.getElementById("pic");
            var list=document.getElementById("list");
            var li=list.getElementsByTagName("li");
            for(var i=0;i<arr.length;i++){
                li[i].className=""
            }
            pic.src=arr[j];
            li[j].className="bg";
        }

分析：这里需要点击圆点，就要在li+onclick事件；同样我们需要定义一个图片数组。这里面我们需要用到传参，通过形参对应的实参实现每一个圆点对应的图片；我们先使所有圆点都为默认样式，点击某个圆点，样式改变，对应的图片也进行改变。

最终效果：


这里的效果显示虽然和上线的相同，但是点击位置并不相同