JS 实现banner图片轮播效果(鼠标事件)


Posted in Javascript onAugust 04, 2017

一.要实现的效果

1.点击左右可切换图片

2.点击小圆点 可切换图片

二.效果图

JS 实现banner图片轮播效果(鼠标事件)

三.代码

1.css

<style type="text/css">
body,img,span,ul,li{margin: 0;padding: 0;}
#div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;}
img{width: 600px;height: 350px;}
span{display: inline-block;position: absolute;width: 50px;height: 50px;border-radius: 25px;background:rgba(0,0,0,.3); font-size: 30px;line-height: 50px;text-align: center;cursor: pointer;color: white;}
span:hover{background:rgba(255,255,255,.5);color:black;transform:scale(1.3);}
span#L{left: 10px;top: 150px;}
span#R{right: 10px;top: 150px;}
#div1 #ul{position: absolute;bottom: 10px;left: 250px;width: 125px;height: 20px;}
#div1 #ul li{list-style: none;float: left;height: 20px;width: 20px;border-radius: 10px;background:rgba(255,255,255,.5); margin-right: 5px;cursor: pointer;}
#div1 #ul .active{background:rgba(0,0,0,.5);}
</style>

2.html

<body>
  <div id="div1">
    <img src="" alt="">
    <span id="L"><</span>
    <span id="R">></span>
    <ul id="ul">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
  </div>
</body>

3.js

<script type="text/javascript">
window.onload=function(){
  var div1=document.getElementById('div1');
  var oImg=div1.getElementsByTagName('img')[0];
  var spanL=document.getElementById('L');
  var spanR=document.getElementById('R');
  var oUl=document.getElementById('ul');
  var oLi=oUl.getElementsByTagName('li');
  var arrImg=['img2/1.jpg','img2/2.jpg','img2/3.jpg','img2/4.jpg','img2/5.jpg'];
  var num=0;
  var oldLi=0;
  function fn(num) {
    oImg.src=arrImg[num];
  }
  fn(0);
  function fnLi(num){
    oLi[oldLi].className='';
    oLi[num].className='active';
    oldLi=num;
  }
  fnLi(0);
  /*点击左右span图片切换*/
  /*点击左右span时li切换*/
  spanL.onclick=function(){
    if (num<1) {
      num=arrImg.length-1;
      fn(num);
      fnLi(num);
    }else{
      num--;
      fnLi(num);
      fn(num);
    }    
  }
  spanR.onclick=function(){
    if (num==arrImg.length-1) {
      num=0;
      fn(num);
      fnLi(num);
    }else{
      num++;
      fnLi(num);
      fn(num);
    }    
  }
  /*点击li实现图片切换*/
  for (var i = 0; i < oLi.length; i++) {
    oLi[i].index=i;
    oLi[i].onclick=function(){
      fn(this.index);
      fnLi(this.index);
    }
  }
}
</script>

总结

以上所述是小编给大家介绍的JS 实现banner图片轮播效果(鼠标事件),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 #Javascript
js模拟百度模糊搜索的实例
Aug 04 #Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 #Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 #Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
Angular2环境搭建具体操作步骤(推荐)
Aug 04 #Javascript
You might like
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php反射应用示例
2014/02/25 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
JS input 数字验证代码
2009/07/30 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jQuery隐藏和显示效果实现
2016/04/06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
导游个人求职信范文
2014/03/23 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
英文求职信范文
2014/05/23 职场文书
农业项目建议书
2014/08/25 职场文书
刑事上诉状范文
2015/05/22 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers