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

<!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. 记一次laravel-jwt修改黑名单所用redis数据库

    场景是这样的,我用tymon/jwt包做鉴权.jwt是自编码token,过期前想要强制失效只能将其加入黑名单中,黑名单一般用缓存存储. 但会有一个问题,若某种意外情况不小心执行了php aritsan ...

  2. K8s存储卷、pv和pvc的使用

    emptyDIR 临时目录 hostPath :使用主机的路径 网络存储: 传统的设备存储:NAS,SAN 分布式存储:glusterfs,rbd,cephfs 云存储:EBS,Azure,阿里云的 ...

  3. my题库

    数论: 51nod 1240 莫比乌斯函数 51nod 1135 原根 图论: 51nod 1264 线段相交 51nod 1298 圆与三角形 dp: 数位dp: hdu 4734 51nod 10 ...

  4. jquery中attr属性操作

  5. python,ModuleNotFoundError,is not a package

    Traceback (most recent call last): File "/home/lll/zzz/work/video/zzz/generate.py", line 7 ...

  6. thinkphp 5 _initialize 使用问题

    如果继承的是common的话.控制器的_initialize要先继承父类的_initialize parent::_initialize();

  7. Python基础 ----- 流程控制

    ------   条件判断 if 条件判判断语法: 条件判断注意: 1.由if 条件起始 2.关键字后面要加一个空格 3.条件后面接: 4.符合python代码缩进格式 5.条件判断可以有多种组合方式 ...

  8. 51单片机学习笔记（清翔版）（13）——LED点阵、74HC595

    如图3,点阵屏分单色和彩色,点阵屏是由许多点组成的,在一个点上,只有一颗一种颜色的灯珠,这就是单色点阵屏,彩色的在一个点上有三颗灯珠,分别是RGB三原色. 图4你可能没看出来,那么大块黄色的就是点阵屏 ...

  9. OO第二单元学习总结

    前言: 第二单元总共包括三次电梯调度作业.这三次作业在笔者看来是为了让学生了解什么是多线程,多线程的好处及可能存在的潜在问题,对于多线程的安全问题应该如何解决和保证结果的唯一性和正确性.那么接下来笔者 ...

  10. php使用redis的GEO地理信息类型

    redis3.2中增中了对GEO类型的支持,该类型存储经纬度,提供了经纬设置,查询,范围查询,距离查询,经纬度hash等操作. <?php $redis = new Redis(); $redi ...