js渐隐渐现透明度变化淡入淡出轮播图、焦点图

一些广告banner展示常见。

(附件)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            *{margin:0;padding:0;}

            a{text-decoration:none;color:#fff;}

            #box{height:454px;width:730px;margin:50px auto;position:relative;}

            ul{list-style:none;}

            #picture li img{vertical-align:bottom}

            #picture li{position:absolute;opacity:0}

            #picture .show{opacity:1}

            #list{width:100%;text-align:center;position:absolute;bottom:10px;}

            #list a{display:inline-block;height:18px;width:18px;background:aqua;border-radius:50%;

            margin:4px;font-size:12px;font-family: "微软雅黑";}

            #list .coloe{background:red}

            #btn{display:none;}

            #btn a{height:62px;width:28px;font-size:24px;text-align:center;line-height:62px;position:absolute;

            background:#ccc;margin-top:-31px;display:inline-block;top:50%;}

            #left{left:0}

          #right{right:0}

          img{width:730px;height:454px;}

        </style>

        <script type="text/javascript" src="js/fengzhuanghanshu.js"></script>

        <script type="text/javascript">

           window.onload=function(){

               var aLi=picture.getElementsByTagName("li");

               var aA=list.getElementsByTagName("a");

               var iCur=0;

               timer=setInterval(function(){

                   iCur++;

                   if(iCur>=aLi.length){

                       iCur=0

                   }

                   for(var i=0;i<aLi.length;i++){

                   startMove(aLi[i],{opacity:0})

                   aA[i].style.background="aqua"

               }

               startMove(aLi[iCur],{opacity:100})

               aA[iCur].style.background="red"

               },2000)

               box.onmouseover=function(){

                   clearInterval(timer);

                   btn.style.display="block"

               }

               box.onmouseout=function(){

                   timer=setInterval(function(){

                   iCur++;

                   if(iCur>=aLi.length){

                       iCur=0

                   }

                   for(var i=0;i<aLi.length;i++){

                   startMove(aLi[i],{opacity:0})

                   aA[i].style.background="aqua"

               }

               startMove(aLi[iCur],{opacity:100})

               aA[iCur].style.background="red"

               },2000)

                    btn.style.display="none"

               }

               for(var j=0;j<aA.length;j++){

                   aA[j].index=j

                    aA[j].onclick=function(){

                        iCur=this.index

                   if(iCur>=aLi.length){

                       iCur=0

                   }

                   for(var i=0;i<aLi.length;i++){

                   startMove(aLi[i],{opacity:0})

                   aA[i].style.background="aqua"

               }

               startMove(aLi[iCur],{opacity:100})

               aA[iCur].style.background="red"

               }

               }

               left.onclick=function(){

                   iCur--;

                   if(iCur<0){

                       iCur=aLi.length-1

                   }

                   for(var i=0;i<aLi.length;i++){

                   startMove(aLi[i],{opacity:0})

                   aA[i].style.background="aqua"

               }

               startMove(aLi[iCur],{opacity:100})

               aA[iCur].style.background="red"

               }

            right.onclick=function(){

                   iCur++;

                   if(iCur>=aLi.length){

                       iCur=0

                   }

                   for(var i=0;i<aLi.length;i++){

                   startMove(aLi[i],{opacity:0})

                   aA[i].style.background="aqua"

               }

               startMove(aLi[iCur],{opacity:100})

               aA[iCur].style.background="red"

               }

           }

        </script>

    </head>

    <body>

        <div id="box">

            <ul id="picture">

                <li class="show"><img src="img/1.jpg"  /> </li>

                <li><img src="img/2.jpg"  /> </li>

                <li><img src="img/3.jpg"  /> </li>

                <li><img src="img/4.jpg"  /> </li>

                <li><img src="img/5.jpg"  /> </li>

                <li><img src="img/6.jpg"  /> </li>

            </ul>

            <div id="list">

                <a class="coloe" href="#"></a>

                <a href="#"></a>

                <a href="#"></a>

                <a href="#"></a>

                <a href="#"></a>

                <a href="#"></a>

            </div>

            <div id="btn">

                <a id="left" href="#">&lt;</a><a id="right" href="#">&gt;</a>

            </div>

        </div>

    </body>

</html>

js渐隐渐现透明度变化淡入淡出轮播图的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  3. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  8. js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

随机推荐

  1. semi-consistent简介

    semi-consistent简介 http://hedengcheng.com/?p=220 semi-consistent简介    1 semi-consistent实现    2 MySQL ...

  2. mysql 开启profiling

    mysql 开启profiling

  3. Python中使用中文正则表达式匹配指定的中文字符串

    业务场景: 从中文字句中匹配出指定的中文子字符串 .这样的情况我在工作中遇到非常多, 特梳理总结如下. 难点: 处理GBK和utf8之类的字符编码, 同时正则匹配Pattern中包含汉字,要汉字正常发 ...

  4. Jquery each&forEach

    jQuery方法 语法 .each() 作用 用来遍历dom 用法 $(dom).each( function(index, Element) ) { do Something... } 参数 第一个 ...

  5. 把 ElasticSearch 当成是 NoSQL 数据库

    Elasticsearch 可以被当成一个 “NoSQL”-数据库来使用么? NoSQL 意味着在不同的环境下存在不同的东西, 而erestingly 它并不是真的跟 SQL 有啥关系. 我们开始只会 ...

  6. CRM项目总结-封装PortletURLUtil

    package com.ebizwindow.crm.utils; import java.security.Key; import java.util.List; import javax.port ...

  7. 【GISER && Painter】矢量切片(Vector tile)

    说明:本月的主要工作都是围绕制作矢量切片这一个核心问题进行的,所以2月的主题就以这个问题为主,目前分支出来的一些内容主要包括了TMS(Tile map service),OpenLayers3中的Pr ...

  8. Mysql闭包表之关于国家区域的一个实践

    在电商系统中,我们总是会遇到一些树形结构数据的存储需求.如地理区域.位置信息存储,地理信息按照层级划分,会分为很多层级,就拿中国的行政区域划分为例,简单的省-市-县-镇-村就要五个级别.如果系统涉及到 ...

  9. ARM的Trust Zone技术

    ARM的Trust_Zone技术是一个系统的Access Control的架构. 与AXI,AHB,APB其中的secure,supervisor信号相关联. 与ARM core的模式相关连,当ARM ...

  10. DOM EVENT

    属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblcl ...