js轮播图片小圆点变化_javaScript图片滚动轮播，图片下小圆点+两边箭头点击自动关联！...

javaScript图片滚动轮播，图片下小圆点+两边箭头点击自动关联！

示例代码：html>

title>

*{margin:0;padding:0;}

#box{position: relative;width:500px;height:300px;margin:100px auto;}

li{list-style:none;}

#image{width:500px;height: 300px;position: relative;}

#image li{position: absolute;top:0;left:0;display: none;}

#image li.image_show{display: block;}

#list {position: absolute;bottom: 6px;left: 50%;margin-left: -36px;}

#list li{ width: 12px;vertical-align: middle;height: 12px;float: left;border-radius: 6px;margin-right: 6px;background-color:#ccc;}

#list li.list_show{background:red;}

.round li{width: 40px; height: 40px; background-color: #cccccc;border-radius: 20px;line-height: 40px;color: white;font-size: 28px;font-weight: bold;text-align: center;}

.round li:hover{background-color: #666;cursor: pointer;}

.round_l{float: left;margin-left: 5px;}

.round_r{float:right;margin-right: 5px;}

.round{width: 500px;position: absolute;top:50%;margin-top: -20px;display: none;}

style>

head>

• li>
• li>
• li>
• li>

  ul>

  • li>
  • li>
  • li>
  • li>

    ul>

    • >li>

      ul>

      p>

      /*当鼠标进入盒子，盒子两边的圆形显示效果*/

      function $(id){return document.getElementById(id);}

      $("box").οnmοuseοver=function () {

      $("round").style.display="block";

      }

      $("box").οnmοuseοut=function () {

      $("round").style.display="none";

      }

      var image = $("image").getElementsByTagName("li");

      var list =$("list").getElementsByTagName("li");

      var round_r = $("round_r");

      var round_l = $("round_l");

      for (var i = 0; i 

      list[i].index = i;

      /*当鼠标放在图片下方小圆点上时图片自动切换*/

      list[i].onmouseover = function(){

      for(var j = 0;j

      list[j].className="";

      image[j].className="";

      }

      this.className="list_show";

      image[this.index].className="image_show";

      }

      }

      round_r.onclick = function(){

      move(false);

      }

      round_l.onclick = function(){

      move(true);

      }

      function move(boolean){

      for(var i = 0;i

      if(list[i].className=="list_show"){

      var index = i;

      break;

      }

      }

      boolean ?(index == 0? index= list.length-1:index--):(index == list.length-1? index= 0:index++);

      for(var j = 0;j

      list[j].className="";

      image[j].className="";

      }

      list[index].className="list_show";

      image[index].className="image_show";

      }

      script>

      body>

      html>