JavaScript做banner轮播图-蒲公英云

JavaScript做banner轮播图

轮播图分为两种，一种是点击下方圆点，图片跟随圆点的变化而变化；还有一种是这篇文章要写的：点击图片，下方圆点跟随图片的变化而变化。

设计思路

在body里面定义一个列表，通过css来设计圆点的样式；同时在body里还应该写出第一张显示的图片并设置这个图片的id，为这张图片加上onclick()点击事件；通过JavaScript来实现效果。

body代码如下：

<body>
    <img src="img/a1.jpeg" id="pic" onclick="f()">
    //因为是通过点击图片而变化，所以在图片里得加入onclick()点击事件
    <ul id="list">
        <li class="bg"></li>
        //给点击的小圆点设计了样式，样式的类名为bg
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

css代码如下：

*{ 
     padding:0;
     margin: 0;
     list-style: none;
  }
 #list{ 
         height: 100px;
         width: 1000px;
       }
  #list li{ 
              float: left;
              background: #c0c0c0;
              height: 100px;
              width: 100px;
              border-radius: 50px;
              margin-left:150px;
              cursor: pointer;
            }
  .bg{ 
          background:red!important;
       }

注意：

border-radius: 50px;设置圆角度的，当它等于宽高的一半就是圆形。
cursor: pointer;点鼠标划过，鼠标状态呈现小手形状。
background:red!important;颜色强制转化为red。

JavaScript代码如下：

<script>
        var i=0;
        //定义一个变量i
        function f(){ 
            var arr=["img/a1.jpeg","img/a3.jpeg","img/a4.jpeg","img/a5.jpeg"];
            //把要显示的图片存入数组arr中
            i++;
            //i+1，i变为1
            if(i>=arr.length){ 
                i=0;
            }
            //如果i大于等于数组的长度，i=0
            var pic = document.getElementById("pic");
            //定义一个变量pic，用来接收代码中id名为pic的文档
            pic.src=arr[i];
            //pic的图片变为arr数组中第i个的图片
            var list = document.getElementById("list");
            //定义一个变量list，用来接收代码中id名为list的文档
            var li = list.getElementsByTagName("li");
            //定义一个变量li，用来接收代码中标签名为li的标签
            for(var j=0;j<li.length;j++){ 
                li[j].className="";
            }
            //图片没有点击的圆点不变色
            li[i].className="bg";
            //图片被点击的圆点变为bg所设置的颜色red
        }
    </script>