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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
js中replace的用法总结
Dec 27 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
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
wordpress之wp-settings.php
2007/08/17 PHP
Discuz! Passport 通行证整合
2008/03/27 PHP
php中文验证码实现示例分享
2014/01/12 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python处理session的方法整理
2019/08/29 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
《老山界》教学反思
2014/04/08 职场文书
公司副总经理任命书
2014/06/05 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
单位工作证明书格式
2014/10/04 职场文书
春秋淹城导游词
2015/02/11 职场文书
酒会开场白大全
2015/06/01 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书