以下那些注释呢,都是要靠自己理解才是最重要的,

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            .banner{width: 800px;height: 300px;margin:  auto;position: relative;}

            .banner img{width: %;height: %;}

            ul{position: absolute;left: %;transform:translate(-%,);bottom: 15px;list-style: none;}

            li{float: left;width: 30px;height: 30px;background:rgba(,,,.);border-radius: %;text-align: center;line-height: 30px;font-weight: bold;margin-right:10px ;}

            #zleft,#yright{width:0px;position: absolute;top: ;line-height: 300px;font-size: 80px;font-weight: bold;color: white;background: rgba(,,,0.3);overflow: hidden;transition: .8s;}

            #zleft{left: ;}

            #yright{right: ;}

        </style>

    </head>

    <body onload="dong()"><!--进入页面先行加载某个函数-->

        <div class="banner">

            <img src="img/t0.jpg" />

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

            <div id="zleft"><</div>

            <div id="yright">></div>

        </div>

        <script>

            //获取所有需要的东西;

            var banner=document.getElementsByClassName("banner")[];

            var lis=document.getElementsByTagName("li");

            var zleft=document.getElementById("zleft");

            var yright=document.getElementById("yright");

            var imgs=document.getElementsByTagName("img")[];

            var timer=setInterval("dong()",);        //给图片定时,让图片按定时器秒数动;

            var index=-;                                //给图片给初始值;

                function dong(){

                    index++;

                    resetColor();                              //5.调用函数

                    lis[index].style.backgroundColor="yellow";//4.给轮播点做选中状态

                    imgs.src="img/"+"t"+index+".jpg";    //1.获取图片路径

                    if(index==){                        //3.判断关键节点,最后一张与第一张的关联;

                        index=;

                    }

                                                //2.路径循环

                }

                function resetColor(){                     //5.创建一个函数(清楚上一个轮播点的状态)

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

                        lis[i].style.backgroundColor="rgba(255,255,255,.3)"

                    }

                }

//                btn点击

                for (var i=;i<lis.length;i++) {  //1.循环轮播点

                lis[i].onclick = function(){             //2.给轮播点做点击

                    clearInterval(timer);//5.清楚名为timer的定时器

                    index = this.innerHTML-;    //3.当前下标等于页面中的数字;注意:后面的减一;

                    imgs.src = "img/"+"t"+index +".jpg";//4.获取图片路径

                    resetColor();//6.获取上面的,清楚上一个轮播点的状态的函数

                    lis[index].style.background = "yellow"//6.清楚函数的样式

                    }

                }

    //            鼠标悬浮banner

                banner.onmouseover = function(){//1.鼠标放到banner上的时候

                    clearInterval(timer);  //3.清楚定时器

                    zleft.style.width = yright.style.width = "60px";  //2.两边按钮出现;这里要注意,上面设置按钮宽度的时候,给宽设置为0px

                }

                banner.onmouseout = function(){//1.鼠标离开banner上的时候

                    timer = setInterval("dong()",);//3.恢复轮播动

                    zleft.style.width = yright.style.width = "0px";//2.两边按钮消失

                }

                zleft.onclick = function(){//左边按钮点击

                    index--;

                    if (index ==-){//最后一张,与第一张之间的衔接

                        index = ;

                    }

                    resetColor()//获取清楚轮播点的函数

                    lis[index].style.background ="yellow"

                    imgs.src = "img/"+"t"+index+".jpg";//获取图片路径

                }

                yright.onclick = function(){

                    index++;

                    if (index == ){

                        index = ;

                    }

                    resetColor()

                    lis[index].style.background = "yellow"

                    imgs.src = "img/"+"t"+index+".jpg";

                }

        </script>

    </body>

</html>

js做的轮播图的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. JS+css3焦点轮播图PC端

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

  4. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  5. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  6. JS 实现动态轮播图

    JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...

  7. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  8. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  9. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

随机推荐

  1. Python module ---- getopt

    optlist, argv = getopt.getopt(argv, 'cdsarRvn:e:E:f:F:w:O:m:M:o:g:') 模块getopt用于分割了main函数的参数,参数args一般 ...

  2. Mac系统如何显示隐藏文件？

    显示全部文件 defaults write com.apple.finder AppleShowAllFiles -bool true osascript -e 'tell application & ...

  3. c++多态及实现原理

    https://www.cnblogs.com/cxq0017/p/6074247.html 通过虚函数实现,普通函数在编译过程中即确定了函数的地址,虚函数的函数地址是在程序运行的时候确定的,有虚函数 ...

  4. 结合之前看的一些东西，阅读RockMQ实战与原理解析笔记

    Topic有多个message queue,消息可以并行的向各个message queue发送,消费者也可以并行的从多个message queue读取消息并消费 clustering模式消费一个top ...

  5. [PHP] 常备的现代 PHP 项目开发准备

    [ Windows 开发环境 ] phpStudy(http://phpstudy.php.cn/) 现在一般选择版本: php7.1 + nginx,常用 curl.openssl 扩展选择打开. ...

  6. 修改jupyter notebook主题、字体和启动路径

    目录 1.安装主题 2.切换 3.字体 4.启动路径 1.安装主题 window在cmd中输入 pip install --upgrade jupyterthemes 完成后输入查看 jt -l 就提 ...

  7. jquery中添加元素append，prepend，before和after方法的区别

    append:在元素内部的最后面添加元素,作为子元素. prepend:在元素内部的最前面添加元素,作为子元素. before:在元素的前边,作为兄弟元素添加. after:在元素的后边,作为兄弟元素 ...

  8. spring boot 2.0.4 Redis缓存配置

    spring boot 2 使用RedisTemplate操作redis存取对象时,需要先进行序列化操作 import org.springframework.cache.CacheManager; ...

  9. express 内存溢出问题分析定位

    一.现象 1. 如下报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 1: n ...

  10. 区块链入门(5)Truffle 项目实战,Solidity IDE, 智能合约部署

    在上一张我们学习了Truffle项目的创建,部署等相关内容,今天我们就来实战一下. 今天我们要做3件事: 1) 学习搭建一个Solidity IDE(Remix). 2) 使用这个Solidity I ...