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. TCP/IP协议，TCP与平台通信，通讯协议压力测试（python）

    最近的项目来了一个需求,要求测试tcp网关通讯协议: 1.液压井盖通过TCP/IP TCP与平台通信: 2.硬件定期发送心跳包(10S)给平台,是平台与硬件保持长连接: 3.每台硬件有一个12字节的唯 ...

  2. mapper 传多个参数

    Mybatis的Mapper接口的参数,一般是一个对象,但如果不是对象,并且有多个参数的时候呢?我们第一个的想法是把参数封装成一个java.util.Map类型,然后在方法的注释上面写上map的key ...

  3. mysql生成主键

    在mysql中,可以使用uuid 来生成主键,但是用mysql的uuid()函数 ,生成的uuid是36位的,其中包含32个字符以及4个分隔符(-), 往往这个分隔符对我们来说是没有用的,可以使用my ...

  4. Git 从入门到熟练|不敢说精通

    前言 如果有一定版本管理软件基础或使用过 svn 的你,这篇 git 的文章应该是最适合你的.作者也是从 svn 过来,从开始的觉得 git 麻烦,到最后还是感觉 git 是最好用的版本控制软件. 虽 ...

  5. 构建企业级数据湖？Azure Data Lake Storage Gen2实战体验（中）

    引言 相较传统的重量级OLAP数据仓库,“数据湖”以其数据体量大.综合成本低.支持非结构化数据.查询灵活多变等特点,受到越来越多企业的青睐,逐渐成为了现代数据平台的核心和架构范式. 因此数据湖相关服务 ...

  6. （一）spring 高级装配-@Profile

    1.环境与profile 示例:数据库配置 a:通过@Bean注解,通过EmbeddedDatabaseBuilder创建数据源 @Bean(destroyMethod="shutdown& ...

  7. Android 让你的 Room 搭上 RxJava 的顺风车 从重复的代码中解脱出来

    # 什么是 Room ? 谷歌为了帮助开发者解决 Android 架构设计问题,在 Google I/O 2017 发布一套帮助开发者解决 Android 架构设计的方案:Android Archit ...

  8. [Pandas] 04 - Efficient I/O

    SQLITE3接口 调动 SQLITE3数据库 import sqlite3 as sq3 query = 'CREATE TABLE numbs (Date date, No1 real, No2 ...

  9. gitbook 入门教程之还在搞公众号互推涨粉?gitbook 集成导流工具,轻轻松松躺增粉丝!

    相信大多数博客作者都或多或少有过这样想法: 现在各种平台这么多,想要实现全平台发布就要到处复制粘贴,等我有空一定做统一平台一次性全部解决! 不知道正在阅读文章的你,有没有这样的想法? 反正我确实这么想 ...

  10. 修改zabbix的端口号

    1.前言 zabbix-server的默认端口号是10051.如果存在端口号冲突,需要更改端口号. 以下为更改端口号的步骤. 2.更改配置文件  通常用安装包,也就是yum方式部署的话,其默认的配置文 ...