焦点图片切换实例二

注:图片地址写在HTML之中的写法~~

 <div class="wrap" id='wrap'>
    <ul id="pic">
      <li>![]( http://img.mukewang.com/54111cd9000174cd04900170.jpg)</li>
      <li>![]( http://img.mukewang.com/54111dac000118af04900170.jpg)</li>
      <li>![]( http://img.mukewang.com/54111d9c0001998204900170.jpg)</li>
      <li>![]( http://img.mukewang.com/54111d8a0001f41704900170.jpg)</li>
      <li>![]( http://img.mukewang.com/54111d7d00018ba604900170.jpg)</li>    
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>

  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic'),
        img=pic.getElementsByTagName("li"),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;
        //初始化
        fn();
        function fn(){
            for(var i=0;i<img.length;i++){
                img[i].style.display="none";
                list[i].className="";
            }
            img[index].style.display="block";
            list[index].className="on";
        }
        //焦点切换
        for(var i=0;i<img.length;i++){
            list[i].id=i;
            list[i].onmouseover=function(){
                clearInterval(timer);
                index=this.id;
                fn();
            }
        }
        wrap.onmouseover=function(){clearInterval(timer)};
        wrap.onmouseout=autoPlay;
        //自动切换 判断一下避免多次重复叠加执行定时器
        if(timer){clearInterval(timer);timer=null;}
        timer=setInterval(autoPlay,1000);
        //单写出来 减少语句
        function autoPlay(){
            index++;
            if(index>=img.length){index=0}
            fn();
        }
    }   

 *{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;display:none;}
  .wrap ol{position:absolute;  right:5px; bottom:10px;}
  .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;}