写完了但这图并没有什么用拿来做焦点切换效果不好看-慕课网

写完了但这图并没有什么用拿来做焦点切换效果不好看

来源：4-1 焦点轮播图效果

林青石

2015-07-15 18:34

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
<style>
  *{margin:0;
    padding:0;
    list-style:none;}
  .wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}
  .wrap ul{position:absolute;} 
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px; z-index:2;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}

  </style>
  <script type="text/javascript">
  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic'),
        picLi=pic.getElementsByTagName("li");
        //alert(picLi.length);
        var list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;
        autoPlay();
        function fn(obj){
        for (var i = 0; i < picLi.length; i++) {
        picLi[i].style.cssText="display:none";
        list[i].style.cssText="background:#ccc;color:#000;";
        };
            picLi[obj].style.cssText="display:block";
            list[obj].style.cssText="background:#e97305;color:#fff;";        
        }
       function autoPlay(){
        clearInterval(timer);
        timer=setInterval(function(){
        index++;
        if (index>=5) {
        index=0;
        };
        fn(index);
     },500)
   }
   for (var i = 0; i < list.length; i++){
    list[i].id=i;
    list[i].onmouseover=function(){
    var _this=this;
   
    var cao=_this.id;
    clearInterval(timer);
    fn(cao);
    }
    list[i].onmouseout=function(){
    var _this=this;
     autoPlay();
     index=_this.id;
    }
   };
   for (var i = 0; i < picLi.length; i++) {
    picLi[i].onmouseover=function(){
    clearInterval(timer);
    }
    picLi[i].onmouseout=function(){
    autoPlay();
    }
   };
}
  </script>
</head>
<body>
  <div id='wrap'>
    <ul id="pic">
      <li ><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li style="display:none"><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li style="display:none"><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li style="display:none"><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li style="display:none"><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    </ul>
    <ol id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>
</html>

写回答关注