原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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
手把手搭建安装基于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安装攻略:常见问题解答(二)
2006/10/09 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
vue实现文字加密功能
2019/09/27 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
对Python3中的input函数详解
2018/04/22 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
好家长事迹材料
2014/01/23 职场文书
安全负责人任命书
2014/06/06 职场文书
毕业生面试求职信
2014/06/23 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang