JavaScript_banner轮播图

让我们一起来学习一下用js怎么实现banner轮播图呢?

直接看代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>banner轮播</title>

        <style>

            #banner{width:820px;height:430px;margin:0 auto;position:relative;}

            #banner img{width:100%;height:100%;}

            ul{position:absolute;top:83%;left:290px;list-style:none;}

            ul li{width:25px;height:25px;border-radius:50%;float:left;margin-right:15px;text-align:center;line-height:25px;}

            #Left,#Right{position:absolute;top:45%;width:60px;height:60px;display:none;}

            #banner:hover #Left{display:block;}

            #banner:hover #Right{display:block;}

            #Left{left:0;}

            #Right{right:0;}

        </style>

    </head>

    <!--页面加载的时候直接加载它-->

    <body onload="lunbo()">

        <div id="banner">

            <img src="img/banner0.jpg" id="img">

            <ul>

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

            </ul>

            <div id="Left">

                <img src="img/07_箭头_向左.png" id="left">

            </div>

            <div id="Right">

                <img src="img/07_箭头_向右 (1).png" id="right">

            </div>

        </div>

        <script type="text/javascript">

        //首先我们要获取到他们,便于接下来操作

            var Img=document.getElementById("img");

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

            var Left=document.getElementById("left");

            var Right=document.getElementById("right");

            var index=-1;

            var Banner=document.getElementById("banner");

            //定时器(需要定义的函数,它的毫秒数)

            var timer=setInterval("lunbo()",1800);

            //利用定时器使图片达到轮播效果

            function lunbo(){

                index++;

                resetColor();

                if(index == 4){

                    index=0;

                }

                Img.src="img/banner"+index+".jpg";

                Lis[index].style.background="orchid";

            }

            //小原点初始值颜色(定义函数,在定时器去调用它)

            function resetColor(){

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

                    Lis[i].style.background="rgba(100,100,100,.5)";

                }

            }

            //鼠标移入和移出

            Banner.onmouseover=function(){

                clearInterval(timer);

            }

            Banner.onmouseout=function(){

                //变量作用域,因为这边已经给它清除了,所以必须重新声明它.

                timer=setInterval("lunbo()",1800);

            }

            //点击小圆点切换图片到指定位置

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

                Lis[i].onclick = function(){

                    clearInterval(timer);

                    index = this.innerHTML-1;

                    Img.src="img/banner"+index+".jpg";

                    resetColor();

                    Lis[index].style.background = "orchid";

                    timer = setInterval("lunbo()",1800);

                }

            }

            //左边和右边按钮切换

            Left.onclick = function(){

                index--;

                if (index == -1) {

                    index = 3;

                }

                Img.src="img/banner"+index+".jpg";

                resetColor();

                Lis[index].style.background = "orchid";

            }

            Right.onclick = function(){

                if (index == 3) {

                    index = -1;

                }

                index++;

                Img.src="img/banner"+index+".jpg";

                resetColor();

                Lis[index].style.background = "orchid";

            }

        </script>

    </body>

</html>

希望对大家有帮助~~如果有更好的方法,可以一起学习交流哦!

用JavaScript制作banner轮播图的更多相关文章

  1. 如何使用微信小程序制作banner轮播图？

    在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...

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

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

  3. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  4. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  5. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  7. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  8. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

  9. 安卓开发笔记（三十二）:banner轮播图的实现

    一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...

随机推荐

  1. 浮动后的 <li> 如何在 <ul> 中居中显示？

    百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; ...

  2. C# DATETIME格式转换汇总 根据日期过期星期

    C# DateTime.Now.Year --2019(年) DateTime.Now.Month --9(月) DateTime.Now.Day   --19(日) DateTime.Now.Hou ...

  3. java架构之路-（12）JVM垃圾回收算法和垃圾回收器

    接上次JVM虚拟机堆内存模型来继续说,上次我们主要说了什么时候可能把对象直接放在老年代,还有我们的可能性分析,提出GCroot根的概念.这次我们主要来说说垃圾回收所使用的的算法和我们的垃圾回收器,需要 ...

  4. caffe学习一：ubuntu16.04下跑Faster R-CNN demo (基于caffe). (亲测有效，记录经历两天的吐血经历)

    兜兜转转,兜兜转转; 一次有一次,这次终于把Faster R-CNN 跑通了. 重要提示1:在开始跑Faster R-CNN之前一定要搞清楚用的是Python2 还是Python3. 不然你会无限次陷 ...

  5. 如何更规范化使用MySQL

    如何更规范化使用MySQL 背景:一个平台或系统随着时间的推移和用户量的增多,数据库操作往往会变慢:而在Java应用开发中数据库更是尤为重要,绝大多数情况下数据库的性能决定了程序的性能,如若前期埋下的 ...

  6. HTML-css样式引用方式

    1.使用行内样式表 语法:在标签内部写入一个style属性. 优点:没有样式表文件,在某些时候可以提高效率: 优先级高. 缺点:多个页面难以共享样式,不利于代码复用: HTML和CSS代码混杂,不利于 ...

  7. 让我们一起学习如何使用AIDL,它其实并不难(Android)

    前言 该篇文件讲述的是AIDL最基本的使用(创建.调用),关于对于AIDL更深的认识,在后续的随笔中,会持续与大家分享并探讨. 正文 AIDL的定义(什么是AIDL?) AIDL的应用场景(AIDL可 ...

  8. Salesforce学习之路-developer篇（二）利用Jenkins和Bitbucket实现Salesforce的CI/CD功能

    上文提到,基于CRM的二次开发是必不可少的,但是在实际项目中CI/CD是不可忽略的一个重要部分,与传统的Java,Python项目不同,如果对Salesforce进行持续集成和持续部署呢? 结合找到的 ...

  9. jquery让form表单异步提交

    1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...

  10. UnicodeDecodeError: 'gbk' codec can't decode byte 0xb0 in position 279: illegal multibyte sequence

    with open(r'E:\yy\mysql.txt') as wk: print(wk.readlines()) Traceback (most recent call last): File & ...