改变每个图片的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. Spring3 整合 Hibernate4实现数据库操作(1)

    Hibernate知识学习:http://justsee.iteye.com/blog/1061576 注意Hibernate4在开发当中的一些改变  :http://snake-hand.iteye ...

  2. 《BI那点儿事》Microsoft 顺序分析和聚类分析算法

    Microsoft 顺序分析和聚类分析算法是由 Microsoft SQL Server Analysis Services 提供的一种顺序分析算法.您可以使用该算法来研究包含可通过下面的路径或“顺序 ...

  3. 拓扑排序(三)之 Java详解

    前面分别介绍了拓扑排序的C和C++实现,本文通过Java实现拓扑排序. 目录 1. 拓扑排序介绍 2. 拓扑排序的算法图解 3. 拓扑排序的代码说明 4. 拓扑排序的完整源码和测试程序 转载请注明出处 ...

  4. Spring AOP AspectJ Pointcut Expressions With Examples--转

    原文地址:http://howtodoinjava.com/spring/spring-aop/writing-spring-aop-aspectj-pointcut-expressions-with ...

  5. Android监听来电和去电

    要监听android打电话和接电话,只需下面2步骤1.第一步,写一个Receiver继承自BroadcastReceiver import android.app.Service; import an ...

  6. Android上滑手势触发和不增加布局层级扩大点击区域

    最近项目中需要实现手势上滑或者点击滑出界面的效果,实现上是利用GestureDetector,然后在onFling中判断,但遇到一个问题:手势上滑是针对整个布局的,但如果有对单独的View设置点击监听 ...

  7. javascript时间戳和日期字符串相互转换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  8. SpringMVC详细示例

    一.SpringMVC基础入门,创建一个HelloWorld程序 0.框架结构 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于springmvc的配置 < ...

  9. java.io.File中的pathSeparator与separator的差异

    先总的说一下区别: File.pathSeparator指的是分隔连续多个路径字符串的分隔符,例如: java -cp test.jar;abc.jar HelloWorld 就是指";&q ...

  10. JQuery01

    一:JQuery 1 JQuery知识 *:就是让我们学会调用JQ插件,其实内部就是对JS的封装. *:jquery里面有三个文件, 第2个和第3个其实里面的内容是一样的,只是第三个对其进行了压缩,使 ...