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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
JavaScript门道之标准库
May 26 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中分数的相关使用教程
2015/03/30 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python实现kNN算法
2017/12/20 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
计算机大学生的自我评价
2013/10/15 职场文书
科室工作个人总结的自我评价
2013/10/29 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
合作协议书格式
2014/08/19 职场文书
新教师2015年度工作总结
2015/07/22 职场文书