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. Charles 下载

    本文参考:Charles 下载 Charles 下载 当前最新的版本是v4.2.8:官网下载页面:https://www.charlesproxy.com/latest-release/downloa ...

  2. sql字段为逗号分开的字符串值的关联查询

    1.TREE表: [strID] [int] IDENTITY(1,1) NOT NULL,[strName] [nvarchar](50) NOT NULL, 2.SubInfo CREATE TA ...

  3. Salesforce学习之路-developer篇（一）利用VS Code结合Git开发Salesforce

    Part 1: 从Git中克隆代码到本地 git clone https://github.com/git/git Part 2: 在VS Code中安装Salesforce和Git插件 在VS Co ...

  4. [C++] 访问控制与继承详解

      1.访问控制中有三种角色:基类及其友元,派生类,类用户(对象):访问说明符分为public/protected/private,类的成员也相应的分为了3种.   2.访问说明符又分为两种:一个是基 ...

  5. Docker下实战zabbix三部曲之二：监控其他机器

    在上一章<Docker下实战zabbix三部曲之一:极速体验>中,我们快速安装了zabbix server,并登录管理页面查看了zabbix server所在机器的监控信息,但是在实际场景 ...

  6. 第六届蓝桥杯java b组第五题

    九数组分数 1,2,3…9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. public class A { public static vo ...

  7. 编程范式 --- 面向协议编程（Protocol Oriented Programming，简称POP）

    面向协议编程(Protocol Oriented Programming,简称POP) 是Swift的一种编程范式,Apple于2015年WWDC踢出 在Swift的标准库中,能见到大量POP的影子 ...

  8. HashMap和Hashtable的联系和区别

    实现原理相同,功能相同,底层都是哈希表结构,查询速度快,在很多情况下可以互用,早期的版本一般都是安全的. HashMap和Hashtable都实现了Map接口,但决定用哪一个之前先要弄清楚它们之间的分 ...

  9. Java 基础篇之集合

    List 集合 List 集合中元素有序.可重复,集合中每个元素都有其对应的索引顺序. List 判断两个对象相等,只要通过 equals 方法比较返回 true 即可. 看个例子: public c ...

  10. eclipse与hadoop集成，运行wordCount1

    搭好了hadoop集群之后,就该使用它了 第一步:下载hadoop eclipse的插件,将它放到eclipse\plugins的目录下,然后重启eclipse,点击windows->show ...