虽然，用jQuery实现banner图的各种效果十分简单快捷，但是我今天用css+js代码实现了几个banner图的常用功能，效果还不错。

此次，主要想实现以下功能：

　　1. banner图循环不间断切换

　　2. 通过自制按钮实现指定性banner图的切换

　　3. 通过方向按钮实现banner图左/右定向依次切换

　　4. 当banner图存在onmouseover事件时，停止banner切换，当存在onmouseout时继续切换

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #banner{

                 width: 716.8px;

                 height: 537.6px;

                 background-color: aquamarine;

                 margin: 100px auto;

                 position: relative;

                 font-size: 0px;        /*清除img图片间的回车符产生的间隔*/

                 overflow: hidden;

             }

             #banner #bannerImg{

                 width: 100%;

                 position: absolute;

                 top: 0px;

                 left: 0px;

                 white-space: nowrap;    /*使这个图片能一行显示*/

                 transition:all 1s linear;

             }

             #banner #bannerImg .img{

                 width: 100%;

             }

             #banner #bannerButton{

                 font-size: 16px;

                 color: white;

                 position: absolute;

                 bottom: 10px;

                 left: 20px;

             }

             #banner #bannerButton .Button{

                 border-radius: 9px;

                 border: none;

                 outline: none;

                 cursor: pointer;

                 background-color: #7FFFD4;

             }

             #banner #bannerButtonAside .div1{

                 position: absolute;

                 right: 10px;

                 top: 50%;

                 margin-top: -32px;

                 cursor: pointer;

             }

             #banner #bannerButtonAside .div2{

                 position: absolute;

                 left: 10px;

                 top: 50%;

                 margin-top: -32px;

                 cursor: pointer;

             }

         </style>

     </head>

     <body>

         <!--实现 左右按钮，1234，自动滑动，鼠标停上显示小手不动 暂停。-->

         <section id="banner" onmouseover="changeStop()" onmouseout="changeStart()">

             <!--以下是我们的banner图-->

             <div id="bannerImg">

                 <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>

                 <img class="img" src="../img/5f5bdebddd8f1d276aeac8af5f8fa38d.jpg"/>

                 <img class="img" src="../img/5f5e5c091ecb0525fc8204f200670dd9.jpg"/>

                 <img class="img" src="../img/efa11cad9094f951061ee21324277efe.jpg"/>

                 <img class="img" src="../img/0b54c021bd4384c168d835dfc0908018.jpg"/>

                 <img class="img" src="../img/25d10d413faca3bdd7e2d88667f4298f_看图王.jpg"/>

                 <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>    <!--第7张与第一张为同一图片，消除图片切换间断-->

             </div>

             <!--以下是我们左下方的banner图按钮-->

             <div id="bannerButton">

                 <button class="Button" onclick="buttonChange(0)">1</button>

                 <button class="Button" onclick="buttonChange(1)">2</button>

                 <button class="Button" onclick="buttonChange(2)">3</button>

                 <button class="Button" onclick="buttonChange(3)">4</button>

                 <button class="Button" onclick="buttonChange(4)">5</button>

                 <button class="Button" onclick="buttonChange(5)">6</button>

             </div>

             <!--以下是我们左右两个方向按钮-->

             <div id="bannerButtonAside">

                 <div class="div1" onclick="asideChange(1)">

                     <img src="../img/forword.png"/>

                 </div>

                 <div class="div2" onclick="asideChange(0)">

                     <img src="../img/back.png"/>

                 </div>

             </div>

         </section>

     </body>

     <script type="text/javascript">

         var bannerImg=document.getElementById("bannerImg");    /*取出img容器的节点*/

         var Button=document.getElementsByClassName("Button");    /*取出所有的button按钮*/

         var num=0;     /*定义全局变量num,控制banner的切换次序*/

         var aaa=0;     /*定义一个全局变量,用来取定时器函数,并在没有鼠标事件的时候清除定时器*/

         /*通过定时器实现banner图的每3000毫秒切换一次的效果的changeStart()函数*/

         function changeStart(){

                 aaa=setInterval(function(){

                 if (num<=6) {

                     bannerImg.style.transition="all 1s linear";

                     bannerImg.style.left=(-716.8)*(num)+"px";

                     num++;

                 }else{

                     bannerImg.style.transition="all 0s linear";        /*消除num=0时,bannerImg移动的过渡效果*/

                     num=0;

                     bannerImg.style.left=(-716.8)*(num)+"px";

                 }

                 console.log("哈哈哈继续");

             },3000)

         }

         changeStart();

         /*以下是当鼠标悬浮在banner图上时,图片停止自动切换的changeStop()函数*/

         function changeStop(){

             clearInterval(aaa);

             console.log("停止他");

         }

         /*以下是点击按钮实现对应banner图切换的change()函数*/

         function buttonChange(Num){

             num=Num+1;

             bannerImg.style.transition="all 0s linear";

             bannerImg.style.left=(-716.8)*(Num)+"px";

         }

         /*以下是点击左右两个按钮实现banner图切换的buttonChange()函数*/

         function asideChange(x){   /*通过传递形参x,判断往左/往右切换banner图*/

             if (num!=6&&x==1) {

                 num++;

             }else if(num==6&&x==1){

                 num=0;

             }else if(num!=0&&x==0){

                 num--;

             }

             else if(num==0&&x==0){

                 num=5;

             }

             bannerImg.style.transition="all 0s linear";

             bannerImg.style.left=(-716.8)*(num)+"px";

         }

     </script>

 </html>

　　但是经过博主的测试，发现程序存在一定的瑕疵，第一张图片的保留时间比其他图片长，而且每次重新开启定时器均存在这个问题。暂时博主还没有比较简单

省事的方法改良他，所以仅供参考思路，以后要用，当然还是jQuery省事啦！

　　如果存在错误，欢迎朋友们指出，我们一起探讨，改良代码！

原生态JS实现banner图的常用所有功能的更多相关文章

  1. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  2. 如何使用JS实现banner图滚动

    通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...

  3. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  4. JS实现banner图轮换

    方法一: <!--灰色背景代码替换图片--> <!DOCTYPE html><html> <head> <meta charset="U ...

  5. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

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

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

  7. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  8. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  9. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

随机推荐

  1. Sublime Text 3 (Build 3126) 最新注册码

    Sublime Text 作为程序员开发神器,听说最新版更新了 并且增加了不少新特性.马上到官网下载了最新版 Sublime Text 3 3126 使用了下,反应速度比以前的确更快了.随手找了几个S ...

  2. [数据挖掘] - 聚类算法：K-means算法理解及SparkCore实现

    聚类算法是机器学习中的一大重要算法,也是我们掌握机器学习的必须算法,下面对聚类算法中的K-means算法做一个简单的描述: 一.概述 K-means算法属于聚类算法中的直接聚类算法.给定一个对象(或记 ...

  3. Python字典详解

    转载请注明出处 Python字典(dict)是一个很常用的复合类型,其它常用符合类型有:数组(array).元组(touple)和集合(set).字典是一个key/value的集合,key可以是任意可 ...

  4. 如何用好消息推送（JPush）为app拉新、留存、促活

    如何用好消息推送(JPush)为app拉新.留存.促活 作为移动端APP产品运营最重要的运营手段,消息推送(JPush)被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越 ...

  5. ReactiveSwift日常运用<一>

    上一篇中,我已经很详细的介绍了ReactiveSwift,接下来我就举几个简单的例子供大家参考.1.键盘的监听这在我们开发中很常用,因为很多App都需要对登录注册进行判断,这样可以避免服务器存储很多废 ...

  6. StringBuffer与StringBuilder的区别，及实现原理

    区别 1.StringBuffer 与 StringBuilder 中的方法和功能完全是等价的, 2.只是StringBuffer 中的方法大都采用了 synchronized 关键字进行修饰,因此是 ...

  7. Maven工具的使用总结

    Maven作为构建工具,现在项目开发使用的越来越多,相对于ant和gradle,我更喜欢使用maven,先总结maven使用的一系列知识: 一.maven相关的网址: 名称 地址 其他 maven官网 ...

  8. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. c++ string 对象操作

    字符串转换大小写如下: #include "stdafx.h" #include <iostream> #include <string> using na ...

  10. Docker存储驱动之总览

    简介 本文会介绍Docker存储驱动的特性,别列出现在已经支持的存储驱动,最后,会介绍如果选型适合你的存储驱动. 可插拔的存储驱动架构 Docker的存储驱动架构是可插拔的,可以让你很方便的将适合你环 ...