原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 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
使用js画图之画切线
Jan 12 Javascript
理解JS事件循环
Jan 07 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 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
日本十大惊悚动漫
2020/03/04 日漫
网络资源
2006/10/09 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php可变长参数处理函数详解
2017/02/22 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python随机生成身份证号码及校验功能
2018/12/04 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
pytorch构建多模型实例
2020/01/15 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
Java 写一个简单的图书管理系统
2022/04/26 Java/Android