html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

js原生之焦点图转换加定时器实例_javascript技巧_

[ ] 已经帮助:人解决问题

在jQuery之焦点图转换-左右的基础上,将jQuery代码改成js原生,并添加定时器(setInterval()和clearInterval())wZPHTML5中文学习网 - HTML5先行者学习网

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>焦点图转换--原生和定时器</title> <link rel="stylesheet" href="css/reset.css"> <style type="text/css">  .pic-show{width: 480px;overflow: hidden;}  #pic{width: 1920px;height: 320px;position: relative;}  #pic img{display: block;float: left;}  .pic-show>img{display: block;cursor: pointer;opacity: 0.8; position: absolute;top: 142px;left: 30px;}  .pic-show>img:last-child{display: block; position: absolute;left: 414px; }   ul{width: 120px;height: 18px;position: absolute;top: 280px;left: 185px;}  li{float: left;width: 20px;height: 18px;margin-left: 5px;}  a{display: block;width: 20px;height: 18px;text-decoration: none;border: 1px solid #ccc;border-radius: 50%;background-color: #ccc;opacity: 0.6;}  a:hover{background-color: #094a99;}  .aCss{background-color: #094a99;}  p{width: 480px;text-align: center;} </style></head><body> <div class="pic-show">  <div id="pic">   <img src="images/1.jpg" alt="">   <img src="images/2.jpg" alt="">   <img src="images/3.jpg" alt="">   <img src="images/4.jpg" alt="">  </div>  <img id="prev" src="images/slider-prev.png" alt="">  <img id="next" src="images/slider-next.png" alt=""> </div> <ul id="list">  <li><a href="#" title="日落"></a></li>  <li><a href="#" title="钢琴"></a></li>  <li><a href="#" title="大海"></a></li>  <li><a href="#" title="秋色"></a></li> </ul> <p id="p">这是一段测试文字</p> <script src="js/jquery-3.0.0.js"></script> <script type="text/javascript">  var num=0;  function G(id){   return document.getElementById(id)  }  var pic = G('pic')  var next = G('next')  var prev = G('prev')  var p = G('p')  var list = G('list')  var arr = G('list').getElementsByTagName('a')       //点击next  next.onclick=function(){   if(num<3){    num=num+1;    }   else{    num=0;   }   console.log(num);   var mlNum=num * -480+'px';   pic.style.marginLeft=mlNum;   for(var j=0;j<arr.length;j++){    arr[j].style.backgroundColor='#ccc';   }   arr[num].style.backgroundColor="#094a99";   event.preventDefault();   var txt=arr[num].getAttribute("title");   console.log(txt);   p.textContent=txt;  }    //点击prev  prev.onclick=function(){   if(num>0){    num=num-1;    }   else{    num=3;   }   console.log(num);   var mlNum2=num * -480+'px';   pic.style.marginLeft=mlNum2;   for(var j=0;j<arr.length;j++){    arr[j].style.backgroundColor='#ccc';   }   arr[num].style.backgroundColor="#094a99";   event.preventDefault();   var txt=arr[num].getAttribute("title");   console.log(txt);   p.textContent=txt;  }  for(var i=0;i<arr.length;i++){   arr[i].index=i;//创建索引值   arr[i].onclick=function(event){  num=this.index;            var mlNum3=num * -480+'px';       pic.style.marginLeft=mlNum3;        for(var j=0;j<arr.length;j++){     arr[j].style.backgroundColor='#ccc';    }    this.style.backgroundColor='#094a99';    event.preventDefault();    var txt=this.getAttribute("title");    p.textContent=txt;   }  }    //函数封装  function lunbo(){   if(num<3){    num=num+1;    }   else{    num=0;   }   console.log(num);   var mlNum=num * -480+'px';   pic.style.marginLeft=mlNum;   for(var j=0;j<arr.length;j++){    arr[j].style.backgroundColor='#ccc';   }   arr[num].style.backgroundColor="#094a99";   event.preventDefault();   var txt=arr[num].getAttribute("title");   console.log(txt);   p.textContent=txt;  }    //通过定时器调用封装好的函数  var stop=setInterval(lunbo,1500);    //鼠标放上和离开时定时器的状态  pic.onmouseenter=function(){   clearInterval(stop)  }  pic.onmouseleave=function(){   stop=setInterval(lunbo,1500)  } </script></body></html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!wZPHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助