改变每个图片的opacity属性：来自学友刘斌

素材图片：

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

最简单的轮播广告(原生JS)的更多相关文章

  1. 轮播图原生js实现和jquery实现和js面向对象方式实现

    原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  3. (Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知

    轮播广告通知整体思路: 1.首先文字的移动利用了JAVA script 中ScrollLeft的知识点: 2.在设置一条一模一样的新闻,利用无缝轮播图滚动的原理让新闻无缝滚动. 3.使用了自执行匿名函 ...

  4. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  5. CPD轮播广告库的简单算法

    在广告的领域中,有一种广告形式,采用的是CPD的售卖模式,为了对流量进行拆分,媒体方会对广告位进行轮播拆分.比如一个广告位,被拆成了10轮播,那么在广告主来预订广告位的时候,这个时候就可以告诉广告主, ...

  6. FLASH轮播广告 在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）

    在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...

  7. 基于bootstrap的轮播广告页，带图片和文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  9. 利用RecyclerView实现无限轮播广告条

    代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...

随机推荐

  1. .NET面试题解析(07)-多线程编程与线程同步

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 关于线程的知识点其实是很多的,比如多线程编程.线程上下文.异步编程.线程同步构造.GUI的跨线程访问等等, ...

  2. 深入理解line-height与vertical-align

    前面的话 line-height.font-size.vertical-align是设置行内元素布局的关键属性.这三个属性是相互依赖的关系,改变行间距离.设置垂直对齐等都需要它们的通力合作.在CSS字 ...

  3. 如何线程安全地遍历List：Vector、CopyOnWriteArrayList

    遍历List的多种方式 在讲如何线程安全地遍历List之前,先看看通常我们遍历一个List会采用哪些方式. 方式一: for(int i = 0; i < list.size(); i++) { ...

  4. PHP的学习--图解PHP引用

    在一篇文章中看到关于PHP引用的图解,对于加深对PHP引用的理解很有帮助,在这里备份一下. 如果你对PHP的引用一点也不了解,可以先看我之前的博客:PHP的学习--PHP的引用

  5. [New Portal]Windows Azure Cloud Service (34) TechEd 2013 North America关于Azure的最新消息

    <Windows Azure Platform 系列文章目录> 话说TechEd 2013 US上个月3-6日在美国举办了,笔者的文章又有点姗姗来迟了. 需要了解相关视频的网友,请浏览ht ...

  6. Elasticsearch——multi termvectors的用法

    前一篇已经翻译过termvectors的使用方法了,这对于学习如何使用tf-idf来说是很有帮助的了. 更多内容参考我整理的ELK教程 什么是TF-IDF? 今天早晨起来,看<ES IN ACT ...

  7. 纯Shading Language绘制HTML5时钟

    今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS ...

  8. ASP.NET MVC显示HTML字符串

    一些html经HtmlEncode后,如“<span>测试数据</span>”.现需要把这些内容正常显示于asp.net mvc的视图内. 举个例子来解决与说明,先创建一个mo ...

  9. EF CodeFirs 代码迁移、数据迁移

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    标题叫EF CodeFirs 代码迁移.数据迁移. ...

  10. Mysql存储过程（四）——异常处理

    http://blog.csdn.net/crazylaa/article/details/5368421 有时候,不希望存储过程抛出错误中止执行,而是希望返回一个错误码. MySQL 支持异常处理, ...