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. （转）FastDFS文件存储

    一.FastDFS介绍 FastDFS开源地址:https://github.com/happyfish100 参考:分布式文件系统FastDFS设计原理 参考:FastDFS分布式文件系统 个人封装 ...

  2. PAT Maximum Subsequence Sum[最大子序列和，简单dp]

    1007 Maximum Subsequence Sum (25)(25 分) Given a sequence of K integers { N~1~, N~2~, ..., N~K~ }. A ...

  3. docker搭建本地仓库并制作自己的镜像

    原文地址https://blog.csdn.net/junmoxi/article/details/80004796 1. 搭建本地仓库1.1 下载仓库镜像1.2 启动仓库容器2. 在CentOS容器 ...

  4. html05

    1.js中的对象-内置对象-外部对象-自定义对象 2.常见的内置对象有哪些?-String对象-Number对象-Boolean对象-Array对象-Math对象-Date对象-RegExp正则对象- ...

  5. C#--virtual,abstract,override,new,sealed修饰符学习

    1.参考博客  http://www.cnblogs.com/oneword/archive/2009/07/02/1515279.html http://www.cnblogs.com/mygood ...

  6. django登录功能（简单在POST请求）

    第一  先在templates中创立index.html !DOCTYPE html> <head> <meta charset="UTF-8"> & ...

  7. JsonPath的使用

    语法: JsonPath 描述 $ 根节点 @ 当前节点 .or[] 子节点 .. 选择所有符合条件的节点 * 所有节点 [] 迭代器标示,如数组下标 [,] 支持迭代器中做多选 [start:end ...

  8. Linux命令: ls -F

    ls -F 列出目录中的文件 -F参数使得ls命令显示的目录文件名之后加一个斜线(“/”)字符 文件后面的星号("*")表示这是一个可执行程序

  9. python excel操作单元格复制和读取的两种方法

    操作单元格 新建一个sheet, 单元格赋值(两种方法) 单元格A1赋值为’xiaxiaoxu’ 单元格A2赋值为‘xufengchai’ 打印A1和A2单元格的值(两种方法) #coding=utf ...

  10. 应用程序无法正常启动0xc000007b怎么解决

    解决方法两种: 1. 网上搜索中最常见的,缺少DirectX 9 ,去下载一个安上就OK了. 2.第二种情况比较操蛋,其实报的错误应该是:mfc100u.dll丢失 .我在两台电脑上装了相同系统后,台 ...