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 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 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
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php实现学生管理系统
2020/03/21 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP实现八皇后算法
2019/05/06 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
JS实现购物车特效
2017/02/02 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
寝室长工作失责检讨书
2014/10/06 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
数据库连接池
2021/04/06 MySQL
Python Django搭建文件下载服务器的实现
2021/05/10 Python
详解Python常用的魔法方法
2021/06/03 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis