改变每个图片的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. poj 2777（线段树的节点更新策略）

    /* 之前的思想是用回溯的方式进行颜色的更新的!如果用回溯的方法的话,就是将每一个节点的颜色都要更新 通过子节点的颜色情况来判断父节点的颜色情况 !这就是TLE的原因! 后来想一想没有必要 !加入[a ...

  2. 《BI那点儿事》Microsoft 线性回归算法

    Microsoft 线性回归算法是 Microsoft 决策树算法的一种变体,有助于计算依赖变量和独立变量之间的线性关系,然后使用该关系进行预测.该关系采用的表示形式是最能代表数据序列的线的公式.例如 ...

  3. 装X神器--Hacker Typer

    昨天在伯乐在线看到了这样一篇文章<终于也能像电影中的黑客那样写代码咯>,觉得很酷炫,介绍了一个叫Hacker Typer的工具 网址:http://hackertyper.net/ 在 P ...

  4. PHP内核的学习--PHP生命周期

    一切的开始: SAPI接口 SAPI(Server Application Programming Interface)指的是PHP具体应用的编程接口, 就像PC一样,无论安装哪些操作系统,只要满足了 ...

  5. Request.UrlReferrer 使用

    最近有一个功能是反馈统计,然后在反馈建议里面添加是从哪个页面点击过来的,一开始打算做成&url=这种方法加在链接里面然后页面接受参数,后来知道了request.UrlReferrer 知道他可 ...

  6. win10 svchost.exe (LocalSystemNetworkRestricted)大量读写数据

    博主的笔记本联想Y50开机完毕后会不停滴读硬盘/写硬盘,导致开机后一段时间内无法正常使用电脑(硬盘读写高峰期).打开资源监视器发现是"svchost.exe (LocalSystemNetw ...

  7. js每天进步一点点2

    JS之图片的切换效果

  8. Android网格视图(GridView)

    GridView的一些属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动,也可以设置成2.3.4…… 2.android:columnWi ...

  9. Android自动化测试之Monkeyrunner学习笔记(一)

    Android自动化测试之Monkeyrunner学习笔记(一) 因项目需要,开始研究Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括Monkey.Monkeyr ...

  10. Elasticsearch 教程--入门

    1.1 初识 Elasticsearch 是一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎,可以说 Lucene 是当今最先进,最高效的全功能开源搜索引擎框架. 但是 L ...