原JS实现banner图的常用功能


Posted in Javascript onJune 12, 2017

虽然,用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省事啦!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 #Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 #Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 #Javascript
JS判断一个数是否是水仙花数
Jun 11 #Javascript
在bootstrap中实现轮播图实例代码
Jun 11 #Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 #Javascript
You might like
php db类库进行数据库操作
2009/03/19 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python十进制转二进制的详解
2020/02/07 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
python 数据类型强制转换的总结
2021/01/25 Python
python re.match()用法相关示例
2021/01/27 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
营销与策划应届生求职信
2013/11/04 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
法学专业自我鉴定
2014/02/05 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
个人借款协议书范本
2014/11/17 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript