虽然，用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. C# Redis之ServiceStack

    前面几篇博客基本把redis基本操作学习了下,但一些高级应用并没有写进博客,例如持久化.虚拟内存等,像这些主要是通过配置文件来解决的,运维方向可能更侧重一些,对于开发者来说,可能就想知道怎么用C#来和 ...

  2. Yii地址美化(nginx环境)

    通过urlmanager实现yii地址美化,需配合服务器中的rewrite配置     1.在'components'中加入    'urlManager'=>array(        'ur ...

  3. [Bnuz OJ]1176 小秋与正方形

    传送门 问题描述 某天,acm的小秋拿到了一张很大很大的纸.他现在打算把它撕成正方 形.但是他没有任何工具,没有尺子,所以他尝试一种有趣的方法切分矩形.假设这是一个a*b的矩形(a>b),那么小 ...

  4. jQuery后续...

    jQuery 选择器 1.jQuery选择器的简介 (1). Jquery中的选择器完全继承了CSS的风格,利用Jquery选择器,可以非常便捷和快速的找出特定的Dom元素,然后为他们添加相应的行为, ...

  5. （0）写给Web初学者的教案-----Web基础

    0,Web基础 一.    What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...

  6. Spring Data JPA，一种动态条件查询的写法

    我们在使用SpringData JPA框架时,进行条件查询,如果是固定条件的查询,我们可以使用符合框架规则的自定义方法以及@Query注解实现. 如果是查询条件是动态的,框架也提供了查询接口. Jpa ...

  7. Java 中的数组

    1.声明数组String [] arr;int arr1[];String[] array=new String[5];int score[]=new int[3]; 2.初始化数组://静态初始化i ...

  8. java中的对象

    对象                     --计算机语言中的对象 通常,我们可以从一般事物的三个方面,去认识事物: 一.是什么? 二.为什么? 三.怎么样? 接下来,我们也利用这三个方面的思维,去 ...

  9. ubuntu下python flask环境搭建

    ubuntu下python flask环境搭建 1. 安装pip sudo apt-get install python-dev pyhton-pip 2. 安装virtualenv sudo apt ...

  10. Exchange无法发送邮件 未找到匹配的连接器来路由外部收件人解决办法

    使用命令行管理程序创建发送连接器 本示例创建发送连接器,用于集线器传输服务器 HubA 向 Internet 发送电子邮件.   复制 New-SendConnector -Name "In ...