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

<!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. asp.net ajax get 调用(和post不一样，直接返回json才行，否则报错；post不能返回json)

    <script type="text/javascript" > $(document).ready(function () { $('#Label1').click( ...

  2. nginx内容

    nginx工作在7层:web server(静态内容 static contents)web reverse proxy(反向代理http,https,mail),cache(带缓存功能) proxy ...

  3. 深度学习实战-强化学习-九宫格 当前奖励值 = max(及时奖励 + 下一个位置的奖励值 * 奖励衰减)

    强化学习使用的是bellmen方程,即当前奖励值 = max(当前位置的及时奖励 + discout_factor * 下一个方向的奖励值)   discount_factor表示奖励的衰减因子 使用 ...

  4. oss对象云存储

    import qiniu import uuidimport config def qn_upload_voice(fileData): '''上传语音到七牛云 @arg: fileData - 编码 ...

  5. How to Build a New Habit: This is Your Strategy Guide

    How to Build a New Habit: This is Your Strategy Guide by James ClearRead this on JamesClear.com Acco ...

  6. 使用==操作符比较命令行参数args[0]和字符串返回“Invalid type"

    运行程序接收一个来自命令行的字符串参数(取值1,2,3,4),根据参数执行对应语句块. 由于未能判断字符串内容是否相同导致代码if语句块代码失效,怎么也看不到schedule方法的效果, 以下是错误代 ...

  7. Spring再接触 Scope范围

    <bean id="userService" class="com.bjsxt.service.UserService" scope="prot ...

  8. 同机器与不同机器redis集群

    此文为另外一位大神原创由于没有找到分享功能  粘贴复制到此  原地址为https://blog.csdn.net/u012042021/article/details/72818759 一.同机器下的 ...

  9. jquery中的 deferred之 when (三)

    先来看使用案例: var def1 = $.Deferred(); var def2 = $.Deferred(); var def3 = $.Deferred(); var def4 = $.Def ...

  10. 手眼标定之相机随动eye-in-hand 示例：handeye_movingcam_calibration

    * * This example explains how to use the hand eye calibration for the case where* the camera is atta ...