原生态JS实现banner图的常用所有功能

　　虽然，用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图的常用所有功能的更多相关文章

JS 实现banner图的滚动和选择效果
CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...
如何使用JS实现banner图滚动
通过JS实现banner图的滚动主要是定时器的应用先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断改好样式,需注意所有图片要在同行显示,否则不能向左滚动声明一个函数, ...
原生JS实现banner图的滚动与跳转
HTML部分: <div id="banner">  <div id="inside"> &lt ...
JS实现banner图轮换
方法一:  <!DOCTYPE html><html> <head> <meta charset="U ...
原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
这是假的JS——利用CSS Animation实现banner图非交互循环播放
话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...
JQuery自定义插件详解之Banner图滚动插件
前言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
使用CSS3中的input标签与lable标签组合实现banner图的切换
在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

随机推荐

11月15日下午 ajax返回数据类型为XML数据的处理
ajax返回数据类型为XML数据的处理 /*XML:可扩展标记语言 HTML:超文本标记语言标签:<标签名></标签名> 特点: 1.必须要有一个根 2.标签名自定义 3.对 ...
LoadRunner 脚本学习 -- 指针基础
先搞清楚 ++a 和 a++的区别 ++a : 前缀++, 先自增,后表达式 a++ : 后缀++, 先表达式,后自增前缀,自增立即生效. 后缀,下次才会看到效果. 一维数组的指针 Action ...
JAVA开发CHECK STYLE
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-/ ...
How to change data dir of mysql&quest;
# 1 copy orgin data dir of mysql to new one cp -R /var/lib/mysql /mysqldata chown mysql:mysql -R /my ...
Merge Into For Update Example
Merge Into article aa Using ( SELECT md5_id, Min(article_id) as Min_Article_ID from article )) and s ...
LaTeX 多个图片共用一个题注的实现--子图形
http://blog.sina.com.cn/s/blog_58b8951801000a9e.html \begin{figure}\centering\subfigure[这是第一幅图]{\lab ...
JVM基础系列开篇：为什么要学虚拟机？
跟许多人一样,我一开始接触 Java 虚拟机只是因为面试需要用到,所以硬着头皮看看.所以很多人对于为什么要学虚拟机这个问题,他们的答案都是:因为面试.但我经过了几年的学习和实战,我发现其实学习虚拟机并 ...
[模板] 快速傅里叶变换/FFT/NTT
简介 FFT是多项式乘法的一种快速算法, 时间复杂度 \(O(n \log n)\). FFT可以用于求解形如\(C_i = \sum_{j=0}^i A_jB_{i-j}\)的式子. 如果下标有偏差 ...
Mysql 导入文件提示 --secure-file-priv option 问题
MYSQL导入数据出现:The MySQL server is running with the --secure-file-priv option so it cannot execute this ...
mysql基础（一）——表、索引、视图
SQL语句不区分大小写创建数据库 create database myData 删除数据库 drop database myData 创建表 create table company ( code ...