原生js实现图片轮播特效


Posted in Javascript onDecember 18, 2015

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。

运行效果图:

原生js实现图片轮播特效

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播广告</title>
  <style>
    body, div, ul, li {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    body {
      background: #000;
      text-align: center;
      font: 12px/20px Arial;
    }

    #box {
      position: relative;
      width: 492px;
      height: 172px;
      background: #fff;
      border-radius: 5px;
      border: 8px solid #fff;
      margin: 10px auto;
    }

    #box .list {
      position: relative;
      width: 490px;
      height: 170px;
      overflow: hidden;
      border: 1px solid #ccc;
    }

    #box .list li {
      position: absolute;
      top: 0;
      left: 0;
      width: 490px;
      height: 170px;
      opacity: 0;
      transition: opacity 0.5s linear
    }

    #box .list li.current {
      opacity: 1;
    }

    #box .count {
      position: absolute;
      right: 0;
      bottom: 5px;
    }

    #box .count li {
      color: #fff;
      float: left;
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-right: 5px;
      overflow: hidden;
      background: #F90;
      opacity: 0.7;
      border-radius: 20px;
    }

    #box .count li.current {
      color: #fff;
      opacity: 0.7;
      font-weight: 700;
      background: #f60
    }
  </style>
</head>
<body>
<div id="box">
  <ul class="list">
    <li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
  </ul>
  <ul class="count">
    <li class="current">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="">4</li>
    <li class="">5</li>
  </ul>
</div>


<script>
  var box=document.getElementById('box');
  var uls=document.getElementsByTagName('ul');
  var imgs=uls[0].getElementsByTagName('li');
  var btn=uls[1].getElementsByTagName('li');
  var i=index=0; //中间量,统一声明;
  var play=null;
  console.log(box,uls,imgs,btn);//获取正确

  //图片切换, 淡入淡出效果我是用(transition: opacity 0.8s linear)做的,不纠结、简单 在css里面
  function show(a){        //方法定义的是当传入一个下标时,按钮和图片做出对的反应
    for(i=0;i<btn.length;i++ ){
      btn[i].className='';    //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。
      btn[a].className='current';
    }
    for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同
      imgs[i].style.opacity=0;
      imgs[a].style.opacity=1;
    }
  }
  //切换按钮功能,响应对应图片
  for(i=0;i<btn.length;i++){
    btn[i].index=i;  //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住
    btn[i].onmouseover=function(){
      show(this.index);
      clearInterval(play); //这就是最后那句话追加的功能
    }
  }

  //自动轮播方法
function autoPlay(){
      play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
      index++;
      index>=imgs.length&&(index=0);//可能有优先级问题,所以用了括号,没时间测试了。
      show(index);
    },1000)
  }
  autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了

  //div的鼠标移入移出事件
  box.onmouseover=function(){
    clearInterval(play);
  };
  box.onmouseout=function(){
    autoPlay();
  };
  //按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

</script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
浏览器兼容性问题大汇总
Dec 17 #Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 #Javascript
js调出上下文菜单的实例
Dec 17 #Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 #Javascript
JSONObject使用方法详解
Dec 17 #Javascript
JS实现alert中显示换行的方法
Dec 17 #Javascript
You might like
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python 12306抢火车票脚本
2018/02/07 Python
Python多图片合并PDF的方法
2019/01/03 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
django foreignkey(外键)的实现
2019/07/29 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python实现最速下降法
2020/03/24 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python speech模块的使用方法
2020/09/09 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
数字天堂软件测试面试题
2012/12/23 面试题
房地产营销活动策划方案
2014/09/15 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
小学教师岗位职责
2015/04/02 职场文书
《黄道婆》教学反思
2016/02/22 职场文书