原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 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Vue.js对象转换实例
Jun 07 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
Servlet返回的数据js解析2种方法
Dec 12 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
Javascript 二维数组
2009/11/26 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
Python json模块使用实例
2015/04/11 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python提取log文件内容并画出图表
2019/07/08 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
家佳咖啡店创业计划书
2013/12/27 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
英语专业自荐书
2014/06/13 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
小学优秀教师材料
2014/12/15 职场文书
中学生思想品德评语
2014/12/31 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
入党申请书格式
2019/06/20 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android