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 相关文章推荐
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
简单的分页代码js实现
May 17 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
layui弹出层效果实现代码
May 19 Javascript
详解Angular2响应式表单
Jun 14 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python当中的array数组对象实例详解
2019/06/12 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
django中嵌套的try-except实例
2020/05/21 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
python openCV自制绘画板
2020/10/27 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
《天游峰的扫路人》教学反思
2014/04/25 职场文书
平安建设工作方案
2014/06/02 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
公司年底活动方案
2014/08/17 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
赞美教师的句子
2019/09/02 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android