个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
28
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章javascript实现滚轮轮播图片由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本文实例为大家分享了javascript实现滚轮轮播图片的具体代码，供大家参考，具体内容如下 。
效果图如下，只能用滚轮移动到头部和尾部 。
思路:
根据需要展示的图片数量（view-count）与slide-container中存放的图片数量设置ul的长度，然后设置每个li的均等宽度.
每次滚轮滚动ul移动一个li的距离 。
HTML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.slide-container {
max-width
:
1230px
;
margin
:
auto
;
overflow
:
hidden
;
}
.slide-container ul {
transition:
all
0.5
s linear;
}
.slide-container li {
float
:
left
;
}
.slide-container img {
width
:
100%
;
}
|
JS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
(
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;
}());
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.
原文链接：https://blog.csdn.net/qq_37728271/article/details/85935087 。
最后此篇关于javascript实现滚轮轮播图片的文章就讲到这里了,如果你想了解更多关于javascript实现滚轮轮播图片的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
28
4
0
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是，我需要图像像所附图像中的旋转木马一样带来
有人看过像这样的 jQuery 3D 轮播教程吗？ http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源，但想知道是否有人有关于如何连续圈出 DIV 并调整
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。 它应该是这样的: 当我滑动(或用鼠标拖动)时，它应该沿给定方向移动: 所选项目应始终位于中间
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板，它完全符合我的要求。我在开发方面还很陌生。 也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。 这是我需要做的。 我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮，上一个和下一个。 单击下一步按钮时，文本框/文本区域会切
我想构建一个包含两个图像轮播的网页，并且我希望能够将图像从一个轮播拖动到另一个。 我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
我需要做这个 slider ，我找到了一些代码并尝试了，但没有一个完全是 LIKE THIS .bloco03 img {
我的任务是制作 3 张图片的轮播/幻灯片，只能在移动设备上使用。在桌面上，这些图像将显示在 3 列中。有没有一种方法可以自动转换，而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个？ 最佳答案 你
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ，我给了元素框阴影。但我坚持制作不同位置元素的效果，例如 3d 或任何名称。 这是我想做的 http://www.awesomescr
我已经盯着这段相同的代码看了大约 4 个小时，并尝试观看一些不同的教程。问题是 slider 加载，有 3 张幻灯片的空间，但它只显示第一张幻灯片。 所有图像加载良好(在浏览器中验证)，但轮播不会更改
我的 carouse/slider 有问题，我已经做到了，上一张和下一张图片每边各占 25%，中央图片占 50% 宽度。问题是我能够更改左右图像的背景，但我似乎无法将相同的颜色应用于中间图像。我已经尝
我想一次放 5 张图片作为页面的背景，即一张图片会显示一小段时间(比如每张一秒钟)，然后重复它们。 我想知道有没有办法用 CSS 或 JS 来做到这一点？ 预先感谢您的帮助! 最佳答案 这也许就是您正
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ，用于显示水平可滚动项目列表(例如， eshop、最近将照片添加到数据库等)。 它看起来类似于苹果应用程序商
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像，并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码；我真的很想让它适用于无限数量的图像。 {% if page.d
大家好，我有这段代码，我一直在为我的网站编写代码。我正在尝试实现一个轮播功能，其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
我正在构建一个简单的轮播，一旦用户水平滚动，事件点就会改变事件状态。但是，当我滚动时，jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
我正在尝试将文本放在轮播 slider 中的图像下方，但现在文本出现在图像上，而不是下方。 它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
我在使用 boostrap carousel 时遇到 CSS 问题 我只是想让它更高，我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中，http://jsfiddle.ne
我是一名优秀的程序员,十分优秀！