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

<!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. JeecgBoot版本4月份新版即将发布，抢先体验。。

    JeecgBoot版本4月份新版即将发布,抢先体验.. 即将发布版本-更新日志:     1.代码生成器GUI工具     2.支持一对多代码生成器     3.支持按钮权限     4.支持数据权限 ...

  2. Android 7.0 通过FileProvider共享文件

    一.概述 Android 7.0后,提供了很多新特性,其中最主要的是禁止了通过file://URI直接在文件操作共享文件(该操作会触发FileUriExposedException),而是通过cont ...

  3. JavaScript：我总结的数组API

    栈/队列 数组es3: pop删除最后一项(栈) shift删除第一项(队列) push增加到最后(栈) unshift增加到最前(队列) reverse翻转 join转字符串 slice截取(切片) ...

  4. c# linq 汇总

    例子:List<string> list = new List<string>(); list.Add("1 a");list.Add("2 b& ...

  5. c#实现文件写入数据表/以二进制流保存到数据库，并实现下载

    上传: 1.上传文件先保存到服务器   File.SaveAs(path) 2.sql(文件和sql在一个服务器上)进行保存操作: insert into File(filename,filebody ...

  6. c语言：第一次作业，分支，顺序结构

    1.本章学习总结(2分) 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 学了几节课的c语言了,因为没自学的原因,跟不上进度.对于c语言现在挺有兴趣的,愿意去花时间去弥补 ...

  7. .NET Core 跨平台发布Linux和OSX

    跨平台发布 简单新建一个项目. mkdir dotnethello cd dotnethello dotnet new dotnet new之后 修改project.json 如下: { " ...

  8. vue 下拉刷新 上拉加载（vue-scroller）

    <template> <div class="wdRecordCon"> <x-header :left-options="{backTex ...

  9. Mysql JSON字段提取某一个属性值的函数

    mysql从5.7开始才支持JSON_EXTRACT等 JSON相关的函数, 项目里用到的mysql是5.6的,需要提取JSON字段里某一个属性值进行统计, 自己写了一个笨的提取方法: CREATE ...

  10. ajax请求aspx.cs后台方法

    前台jquery代码 $(function () { $("#btnfix").click(function () { $.ajax({ type: "post" ...