自动播放焦点图

时间：2015-05-15 22:44:53 阅读：137 评论：0 收藏：0 [点我收藏+]

标签：

自动播放焦点图和自动播放选项卡原理一致。练练手

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <title></title>
  <style>
   *{margin: 0; padding: 0}
    ul,ol,li{
      list-style: none;
    }
    #div{
      position: relative;
      width: 300px;
      height: 150px;
      margin: 100px auto;
      overflow: hidden;
    }
     #myul{
       position: absolute;
       left:0;
       top:0;
       width: 900px;
       height: 150px;
       overflow: hidden;
     }
    #myul li{
      float: left;
      width: 300px;
      height: 150px;
      line-height: 150px;
      text-align: center;


    }
    .l1{
      background: #999;
    }
    .l2{
      background: yellow;
    }
    .l3{
      background: green;
    }
    ol{
       position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 10;
    }
    ol li{
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      background: #333;
      color: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
    }
    ol li.cur{

      color: #000;
       background: red;
    }
    span{

      position: absolute;
      z-index: 5;
      width: 30px;
      line-height: 30px;
      height: 30px;
      background:#ccc;
      cursor: pointer;

    }
    #left{
      left: 10px;
      top: 50px;

    }
    #right{
      right: 10px;
      top: 50px;

    }
  </style>
  <script>
  window.onload=function(){
    var oDiv =document.getElementById(‘div‘);
    var oLeft =document.getElementById(‘left‘);
    var oRight =document.getElementById(‘right‘);
    var oUl =document.getElementById(‘myul‘);
    var aLi=oUl.getElementsByTagName(‘li‘)
    var oOl =document.getElementById(‘myol‘);
    var aOli=oOl.getElementsByTagName(‘li‘)
    var timer=null;
    var num=0;
    timer=setInterval(function(){
      next()},1000)
    //鼠标移入清除定时器
    oDiv.onmouseover=function(){
      clearInterval(timer)
    }
    //鼠标移出启动定时器
    oDiv.onmouseout=function(){
      timer=setInterval(function(){
      next()},1000)
    }
    //点击上一个
    oLeft.onclick=function(){
      num--;
      if(num==-1){
        num=aLi.length-1 ;
      }
      tab()
    }
     //点击下一个
    oRight.onclick=function(){
      num++;
      if(num==aLi.length){
        num=0;
      }
      tab()
    }
   
    function next(){
      num++;
      if(num ==3){
        num=0;
      }
      tab();
    }
    //鼠标移到下标时
    for(var i = 0; i < aOli.length; i++){
    (function(index){
      aOli[i].onmouseover = function(){
        num = index;//这个我也是参考想到的
        tab();
      };
    })(i);自动
  }
    function tab(){
      document.title = num;
      for(var i=0; i<aLi.length;i++){
        aOli[i].className="";
        aLi[i].style.display=‘none‘;
      }
      aOli[num].className="cur";
      aLi[num].style.display=‘block‘;
    }
  }
  </script>
</head>
<body>
<div id ="div">
    <ul id="myul">
      <li class="l1">1111</li>
      <li class="l2">222222</li>
      <li class="l3">333333</li>
    </ul>
    <ol id="myol">
      <li>1</li>
      <li>2</li>
      <li class="cur">3</li>
    </ol>
    <span id="left">&laquo;</span>
    <span id="right">&raquo;</span>
</div>
</body>
</html>

技术分享

自动播放焦点图

标签：

原文地址：http://www.cnblogs.com/heboliufengjie/p/4506888.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行