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

<!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. [PHP+JS]微信卡券（潦草笔记，全代码，亲测通过）

    群发卡券可以通过客服消息推送 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140547 后端代码: define('A ...

  2. RuntimeError: module compiled against API version 0xb but this version of numpy is 0xa

    两个python,一个是本机自带的,一个是anaconda.先前呢,用自带的安装了Opencv,由于自带的python,对应的numpy版本是13, 而anaconda对应的版本是12,导致impor ...

  3. python字符串 列表 元组 字典相关操作函数总结

    1.字符串操作函数 find 在字符串中查找子串,找到首次出现的位置,返回下标,找不到返回-1 rfind 从右边查找 join 连接字符串数组 replace 用指定内容替换指定内容,可以指定次数 ...

  4. Docker中使用Tomcat并部署war工程

    准备 首先从远程仓库拉取Tomcat镜像到本地. docker pull tomcat 使用images命令查看是否拉取成功. 创建镜像文件并将war包上传到同级目录下.(本文是在/usr/local ...

  5. Java属性中指定Json的属性名称

    只需要使用注解"@JsonProperty(value = "pwd")" import com.fasterxml.jackson.annotation.Js ...

  6. Set集合特点

    1,无序(存储和读取的顺序可能不一样) 2,不允许重复(要求元素唯一) 3,无索引

  7. spring 自定参数解析器（HandlerMethodArgumentResolver）

    https://blog.csdn.net/u010187242/article/details/73647670

  8. freeswitch 使用info显示的通道变量

    2019-01-20 11:57:30.167311 [INFO] mod_dptools.c:1743 CHANNEL_DATA:Channel-State: [CS_EXECUTE]Channel ...

  9. CentOS7 yum安装配置 drbd-84-utils （外部模式）

    1 安装环境介绍 1.1 系统环境 内核:3.10.0-862.el7.x86_64  版本:CentOS Linux release 7.5.1804 (Core) 主服务器:hostname = ...

  10. Opencv-Python学习笔记（一）

    学习和研究计算机视觉,必然绕不开OpenCV. 于是我下载了它的C++源码,用cmake编译遇到一些错误. 然后结合网上一些帖子看源码看了好几天,发现有点不知从何处入手. 于是准备从其python版本 ...