虽然，用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. Tesseract pytesseract的安装和使用

    Tesseract是开源的OCR引擎,可以识别的图片里的文字,支持unicode(UTF-8)编码,100多种语言,需要下载相应语言的训练数据. 安装: 有两种方法,一种是通过编译源码,比较麻烦.我使 ...

  2. Swap Nodes in Pairs leetcode

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  3. TuSDK 简易使用方法 持有图片对象方式

    TuSDK 为涂图照相应用的SDK,打包后文件大小约为5M,缺点为包比较大,且图片清晰度较差一些,优点为直接可以引用滤镜贴纸,方便易用.   使用方法如下:    1.AppDelegate.m 中加 ...

  4. wemall app商城源码中实现带图片和checkbox的listview

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享其中实现带图片和checkbox的listvi ...

  5. SDWebImage下载图片的使用

    第一步,下载SDWebImage,导入工程.github托管地址https://github.com/rs/SDWebImage 第二步,在需要的地方导入头文件 1 #import "UII ...

  6. intellij idea打jar包时的注意事项

    intellij idea项目在打包maven项目时,数据路径很容易出现问题.在IDE内直接运行不会报错,但打成jar包运行就会报错. intellij打包的几种方式:http://www.cnblo ...

  7. JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...

  8. (20)IO流之SequenceInputStream 序列流

    序列流,对多个流进行合并. SequenceInputStream 表示其他输入流的逻辑串联.它从输入流的有序集合开始,并从第一个输入流开始读取,直到到达文件末尾,接着从第二个输入流读取,依次类推,直 ...

  9. HTML Socket实现 .NET

    HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.虽然现在大家把它捧的很火的样子,但是个人认为它还需要其他平台的支持才能真正的"火起 ...

  10. python安装paramiko需要的依赖

    yum install gcc libffi-devel python-devel openssl-devel -y