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. wordpress如何正确自动获取中文日志摘要

    WordPress 函数 get_the_excerpt() 可以获取日志的摘要,如果没有摘要,它会自动获取内容,并且截取.但是由于无法正确统计中文字符数,我爱水煮鱼撰写了下面这个函数来解决这个问题. ...

  2. SRM 619

    easy:  假设每堆石头不全为1,那么每次我们总能取一堆石头分给另外两堆,堆数-1.而且新的局面肯定有一堆的个数大于1. 于是,假设每堆石头数都为1 -> lose.否则的话推断堆数奇偶就可以 ...

  3. 便于理解mysql内幕的各种逻辑图组

    便于理解mysql内幕的各种逻辑图组 http://blog.sina.com.cn/s/blog_445e807b0101ggtl.html 以下是个人一直以来从网络等各种途径收集到的一些对理解my ...

  4. centos7最小安装初始化脚本

    #!/bin/bash #zhangsen #lovexlzs@qq.com if [[ "$(whoami)" != "root" ]]; then exit ...

  5. Keepalived安装后出现的问题总结

    1. 在配好主从备份之后,发现虚拟IP能ping通,但是访问虚拟IP对应机器上的服务(不是apache或者mysql之类的公用软件)却不成功,这是因为要访问的服务绑定了主机上的一个实体IP不是INAD ...

  6. php 非递归实现分类树

    本文实例讲述了php通过前序遍历树实现无需递归的无限极分类.分享给大家供大家参考.具体如下: 大家通常都是使用递归实现无限极分类都知道递归效率很低,下面介绍一种改进的前序遍历树算法,不适用递归实现无限 ...

  7. Object之equals和hashCode

    译者注 :你可能会觉得Java很简单,Object的equals实现也会非常简单,但是事实并不是你想象的这样,耐心的读完本文,你会发现你对Java了解的是如此的少.如果这篇文章是一份Java程序员的入 ...

  8. chrome浏览器使用

    1.如何打开多个历史网页.这个需求是这样的,有时候开了多个网页查找资料,但是又还没有做完,然后又需要重启电脑.显然重启电脑后再开启浏览器,一般都是显示浏览器的主页了,上次开的那些网页全部在历史记录里面 ...

  9. 《ABCNN: Attention-Based Convolutional Neural Network for Modeling Sentence Pairs》

    代码: keras:https://github.com/phdowling/abcnn-keras tf:https://github.com/galsang/ABCNN 本文是Wenpeng Yi ...

  10. AdaBoost学习笔记

    学习了李航<统计学习方法>第八章的提升方法,现在对常用的一种提升方法AdaBoost作一个小小的笔记,并用python实现书本上的例子,加深印象.提升方法(boosting)是一种常用的统 ...