改变每个图片的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. Ajax在IE浏览器会出现中文乱码解决办法

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...

  2. A/B 测试之前必须要了解的 10 件事

    如今,转化率优化(CRO)已是营销人员必须具备的技能,并且与 ROI 直接挂钩.但是在优化网页的转化率方面又有太多因素要考量,如果你已经不堪其忧,请专心做一件事-- A/B 测试. A/B测试,即你设 ...

  3. 解决jquery和prototype库冲突问题

    在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...

  4. 学习RxJS：Cycle.js

    原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...

  5. Bise IE6 在你的网站上加上它让IE滚蛋吧

    <!--[if lt IE 7]> <style type="text/css"> .broswer_tips{height:26px;background ...

  6. 近期总结：generator-web，前端自动化构建的解决方案

    本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一 ...

  7. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  8. AudioCapabilities成员

    参考:http://www.ajerp.com/Cs/DirectX/Capture/DirectX.Capture.html 使用有道翻译2.0 AudioCapabilities成员 公共实例字段 ...

  9. asp.net session

    简介编辑 session对象用于存储特定的用户会话所需的信息 . Session对象的引入是为了弥补HTTP协议的不足,HTTP协议是一种无状态的协议. Session中文是"会话" ...

  10. WCF双工通讯以及客户端间的间接通讯

    由于学习计划安排不当,对WCF的认知一直停滞不前,最近工作上又用回了WCF,重拾一下,看到蒋老师介绍双工通讯的博文,实践一下,积累一下.原想着WCF的双工通讯就是原本的客户端能调用服务端的方法之余,服 ...