javascript实现滚轮轮播图片


Posted in Javascript onDecember 13, 2020

本文实例为大家分享了javascript实现滚轮轮播图片的具体代码,供大家参考,具体内容如下

效果图如下,只能用滚轮移动到头部和尾部

javascript实现滚轮轮播图片

思路:

根据需要展示的图片数量(view-count)与slide-container中存放的图片数量设置ul的长度,然后设置每个li的均等宽度。

每次滚轮滚动ul移动一个li的距离

HTML:

<div class="slide-container" view-count="4">
 <ul>
 <li>
  <img src="images/women/15444293310974910.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293312083674.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293313734437.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293315979953.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293316955485.jpg" alt=""/>
 </li>
 <li>
  <img src="images/women/15444293317767707.jpg" alt=""/>
 </li>
 </ul>
</div>

CSS:

.slide-container {
  max-width: 1230px;
  margin: auto;
  overflow: hidden;
 }
 
 .slide-container ul {
  transition: all 0.5s linear;
 }
 
 .slide-container li {
  float: left;
 }
 
 .slide-container img {
  width: 100%;
 }

JS:

(function () {
 
 let slider = $('.slide-container'),
  li = slider.find('li'),
  length = li.length,
  curImgIndex = 0; //当前图片索引
 
 //设置ul宽度和li的宽度
 function initSlider() {
  slider.find('ul').css({
  'width': length / slider.attr('view-count') * 100 + '%'
  });
  li.css({
  'width': 'calc(' + 100 / length + '% - 10px)',
  'margin': '0 5px'
  });
 }
 
 //统一处理滚轮滚动事件
 function wheel(event) {
  var delta = 0;
  if (!event) event = window.event;
  if (event.wheelDelta) { //IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
  delta = event.wheelDelta / 120;
  if (window.opera)
 
  //因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
   delta = -delta;
  } else if (event.detail) { //FF浏览器使用的是detail,其值为“正负3”
  delta = -event.detail / 3;
  }
  if (delta) {
  handle(delta);
 
  //阻止事件冒泡重复执行和屏幕向下滚动
  event.preventDefault() && event.stopPropagation();
  }
 
 }
 
 //上下滚动时的具体处理函数
 function handle(delta) {
 
  //滚轮向上滚动
  if (delta < 0) {
  curImgIndex++;
  } else if (delta > 0) { //向下滚动
  curImgIndex--;
  }
  move();
 }
 
 function move() {
 
  //到达两端则不移动
  if (curImgIndex > li.length - slider.attr('view-count') || curImgIndex < 0){
  if(curImgIndex > 0 ){
   curImgIndex--;
  }else{
   curImgIndex++;
  }
  return false;
  }
  slider.find('ul').css({
  'transform': 'translateX( -' + 100 / length * curImgIndex + '% )'
  })
 }
 
 initSlider();
 
 //绑定滚轮事件兼容性写法
 if (window.addEventListener)
  slider.get(0).addEventListener('DOMMouseScroll', wheel, false);
 slider.get(0).onmousewheel = wheel;
}());

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
swiper实现导航滚动效果
Dec 13 #Javascript
swiperjs实现导航与tab页的联动
Dec 13 #Javascript
Vue实现简单购物车功能
Dec 13 #Vue.js
javascript前端实现多视频上传
Dec 13 #Javascript
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
js实现滚动条自动滚动
Dec 13 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python中import reload __import__的区别详解
2017/10/16 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python+opencv实现阈值分割
2018/12/26 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
文明学生标兵事迹
2014/01/21 职场文书
六查六看自查材料
2014/02/17 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
趣味运动会加油词
2015/07/18 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python