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 相关文章推荐
转换字符串为json对象的方法详解
Nov 29 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 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学习笔记 数组遍历实现代码
2011/06/09 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
django输出html内容的实例
2018/05/27 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
《大海那边》教学反思
2014/04/09 职场文书
公司请假条范文
2014/04/11 职场文书
大专学生求职自荐信
2014/07/06 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers
Vue Element plus使用方法梳理
2022/12/24 Vue.js