js原生之焦点图转换加定时器实例


Posted in Javascript onDecember 12, 2016

在jQuery之焦点图转换-左右的基础上,将jQuery代码改成js原生,并添加定时器(setInterval()和clearInterval())

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
IntersectionObserver API 详解篇
Dec 11 #Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 #Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 #Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 #Javascript
jquery滚动条插件(可以自定义)
Dec 11 #Javascript
jquery实现简单的瀑布流布局
Dec 11 #Javascript
js倒计时显示实例
Dec 11 #Javascript
You might like
zend api扩展的php对象的autoload工具
2011/04/18 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
php中yii框架实例用法
2020/12/22 PHP
关于JS字符串函数String.replace()
2013/04/07 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python实现数据图表
2017/07/29 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python write无法写入文件的解决方法
2019/01/23 Python
python中 * 的用法详解
2019/07/10 Python
Python面向对象封装操作案例详解
2019/12/31 Python
在python3中实现更新界面
2020/02/21 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
试述DBMS的主要功能
2016/11/13 面试题
后勤采购员岗位职责
2013/12/19 职场文书
公司前台辞职报告
2014/01/19 职场文书
护士感人事迹
2014/05/01 职场文书
小学教师读书笔记
2015/07/01 职场文书
Python time库的时间时钟处理
2021/05/02 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android