原生js实现图片轮播特效

更新时间：2015年12月18日 08:35:28 作者：super_walker

这篇文章主要介绍了原生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实现页面电子时钟
这篇文章主要为大家详细介绍了JavaScript实现页面电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JavaScript中Number.isNaN 和 isNaN 的区别详解
本文和大家分享一个前几天写代码踩的坑,笔者在业务逻辑中需要对一个值进行NaN的判断,由于笔者的不严谨,使用了isNaN,从而引起Bug,也正是因为这个,笔者才知道了isNaN和Number.isNaN的区别,所以本文就和大家聊聊它们的区别
2023-09-09
JS中的变量作用域(console版)
这篇文章主要介绍了JS中作用域以及变量范围,需要的朋友可以参考下
2020-07-07
javascript发表评论或者留言时的展开效果
javascript发表评论或者留言时的展开效果...
2007-07-07
javascript原型继承工作原理和实例详解
这篇文章主要为大家详细介绍了javascript原型继承，阐明什么是原型继承,以及在JavaScript中究竟如何使用原型继承,感兴趣的小伙伴们可以参考一下
2016-04-04
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
这篇文章主要介绍了file-loader打包图片文件时路径错误输出为[object-module]的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
JavaScript中常用的简洁高级技巧总结
这篇文章主要给大家总结介绍了关于JavaScript中常用的简洁高级技巧，文中通过示例代码介绍的非常详细，对大家的学习或者使用Javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
JS兼容所有浏览器的DOMContentLoaded事件
这篇文章主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
2018-01-01
JavaScript性能陷阱小结(附实例说明)
JavaScript陷阱太多，因此我们得步步为营，下面这些点，相信很多同学都会遇到，希望朋友们多注意下。JavaScript陷阱太多，因此我们得步步为营，下面是一些常见的影响性能的陷阱。
2010-12-12
微信小程序开发实现轮播图
这篇文章主要为大家详细介绍了微信小程序开发实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06