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. 微信小程序商城构建全栈应用 Thinkphp5

    课程——微信小程序商城构建全栈应用[目录]第1章 前言:不同的时代,不同的Web第2章 环境,工具与准备工作第3章 模块,路由与获取请求参数第4章 构建验证层第5章 REST与RESTFul第6章 A ...

  2. IOS13系统升级带来的H5兼容性问题

    20号新推送的IOS13给很多app厂商和RD带来了便秘的感觉,目前复现的问题如下,后续还会持续更新: 1.H5 hybrid输入框导致的页面上移,卡住不动.收起减半后,页面出现半截白屏.(IOS12 ...

  3. Netty源码分析 （十一）----- 拆包器之LengthFieldBasedFrameDecoder

    本篇文章主要是介绍使用LengthFieldBasedFrameDecoder解码器自定义协议.通常,协议的格式如下: LengthFieldBasedFrameDecoder是netty解决拆包粘包 ...

  4. 手把手教你搭建Jenkins实现自动化部署Jar

    centeros7 安装配置环境jdk1.8 1.先卸载centeros自带jdk rpm -qa | grep openjdk 查询出来的自带的openjdk 2.删除 rpm -e --nodep ...

  5. maven的pom.xml详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. NodeManager概述(基本职能和内部架构)

    概述 NodeManager是运行在单个节点上的代理,它需要与应用程序的的ApplicationMaster和集群管理者ResourceManager交互: 从ApplicationMaster上接收 ...

  7. [Leetcode] 第313题 超级丑数

    一.题目描述 编写一段程序来查找第 n 个超级丑数. 超级丑数是指其所有质因数都是长度为 k 的质数列表 primes 中的正整数. 示例: 输入: n = 12, primes = [2,7,13, ...

  8. 我对android handle更新UI 的一些理解

    1.handle可以方便快捷地管理子线程对主线程UI 的更新, 2.如果不用handle,当多个子线程同时请求更新UI 时,UI更新操作就无法进行

  9. 200行代码实现Mini ASP.NET Core

    前言 在学习ASP.NET Core源码过程中,偶然看见蒋金楠老师的ASP.NET Core框架揭秘,不到200行代码实现了ASP.NET Core Mini框架,针对框架本质进行了讲解,受益匪浅,本 ...

  10. embedding技术

    目录 word2vec 负采样 目标函数 反向梯度 层次softmax NPLM的目标函数和反向梯度 目标函数 反向梯度 GNN(图神经网络) deepwalk node2vec 附录 word2ve ...