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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
js更优雅的兼容
Aug 12 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
js不是基础的基础
2006/12/24 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
loading动画特效小结
2017/01/22 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
分享6个隐藏的python功能
2017/12/07 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python文件操作基础流程解析
2020/03/19 Python
python中如何设置代码自动提示
2020/07/15 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
教师教学评估方案
2014/05/09 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
给老师的感谢信
2015/01/20 职场文书
营业员岗位职责范本
2015/04/14 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
一文搞懂Redis中String数据类型
2022/04/03 Redis