改变每个图片的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. Android登录等待效果

    上一篇为大家分享了关于AsyncTask的使用,本篇结合AsyncTask为大家介绍一个我们经常看到的一个效果,就是当我们点击登录后,会弹出一个请等待的小窗体,这个效果是如何实现的呢?本篇我就带大家简 ...

  2. 如何用Python输出PPT中的文字信息

    在这里,会用到win32com模块 模块下载地址:http://sourceforge.net/projects/pywin32/files/pywin32/ 代码如下: import win32co ...

  3. Spring学习总结（三）——Spring实现AOP的多种方式

    AOP(Aspect Oriented Programming)面向切面编程,通过预编译方式和运行期动态代理实现程序功能的横向多模块统一控制的一种技术.AOP是OOP的补充,是Spring框架中的一个 ...

  4. 你见过吗？9款超炫的复选框（Checkbox）效果

    复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...

  5. android布局文件中android:icon="?attr/menuIconCamera"找不到对应图标路径

    如 <item android:id="@+id/camera" android:title="Camera" android:icon="?a ...

  6. Windows Azure Cloud Service (41) 修改云服务IIS托管管道模式为4.0经典模式

    <Windows Azure Platform 系列文章目录> 这是笔者在之前的项目中遇到的问题,做一下总结,给网友做参考. 在一般情况下,Visual Studio开发的Cloud Se ...

  7. Windows Azure Active Directory (3) China Azure AD增加新用户

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的China Azure. 本文是对笔者之前的文档:Windows Azure Active ...

  8. Azure Redis Cache (1) 入门

    <Windows Azure Platform 系列文章目录> Microsoft Azure Redis Cache基于流行的开源Redis Cache. 1.功能 Redis 是一种高 ...

  9. sublime Text3使用笔记

    转载:http://blog.csdn.net/u012771929/article/details/30030249 目录: 1.setting 安装插件,package control ,Emme ...

  10. .net using使用小结

    在.net中using使用方法有3种,分别是using指令.using定义使用范围.using别名. using指令,即引用命名空间. using System; using System.Colle ...