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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
怎么清空javascript数组
May 11 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
node thread.sleep实现示例
Jun 20 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
JQuery特殊效果和链式调用操作示例
May 13 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
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
详解AngularJS中的表格使用
2015/06/16 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
js实现点赞效果
2020/03/16 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
一篇文章快速了解Python的GIL
2018/01/12 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python 读取修改pcap包的例子
2019/07/23 Python
Python xlwt模块使用代码实例
2020/06/10 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
黄金搭档广告词
2014/03/21 职场文书
老师对学生的寄语
2014/04/09 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏