原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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
js post方式传递提交的实现代码
May 31 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
js实现车辆管理系统
Aug 26 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
手把手搭建安装基于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下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python实现日志按天分割
2019/07/22 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
浅谈Python __init__.py的作用
2020/10/28 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
保密工作目标责任书
2014/07/28 职场文书
工作感想范文
2015/08/07 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python