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 类
Nov 07 Javascript
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
Vue实现穿梭框效果
Sep 30 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
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python绘制简单折线图代码示例
2017/12/19 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python数据归一化及三种方法详解
2019/08/06 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
2019年.net常见面试问题
2012/02/12 面试题
采购员的工作职责
2013/12/26 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
企业党员一句话承诺
2014/05/30 职场文书
信访工作个人总结
2015/03/03 职场文书
Python基础知识之变量的详解
2021/04/14 Python