原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 相关文章推荐
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php绘制一个扇形的方法
2015/01/24 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
js同源策略详解
2015/05/21 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
虚拟机下载python是否需要联网
2020/07/27 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
小学生防溺水广播稿
2014/01/12 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
保护动物的宣传语
2015/07/13 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
python如何正确使用yield
2021/05/21 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
实现GO语言对数组切片去重
2022/04/20 Golang