- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经为图像 slider 创建了自定义插件。这就像传递要显示的图像数量的参数。最后一张图像可见后如何停止动画?有时之前的点击也会出现问题。帮助我优化代码。
CSS
.imgpresentation {
width: 520px;
height: 110px;
overflow: hidden;
border: 1px solid #ddd;
position: relative;
}
.imgpresentation img {
float: left;
padding: 5px;
}
.imgpresentation .prev {
left: 0;
position: absolute;
top: 40%;
}
.imgpresentation .next {
right: 0;
position: absolute;
top: 40%;
}
.slidethemimgpresentation {
position: absolute;
}
JS
<script>
$.fn.imgSlider = function(nImages) {
var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation');
that.append('<a href="#" class="prev">Previous</a>'+
' <a href="#" class="next">Next</a>').css({
'width': nImages * imgW,
'height': imgH
});
container.css({
'width': imgW * imgL
});
imgW = nImages * imgW;
that.find('.next').on('click', function() {
var currLeft = parseInt(container.css('left'));
currLeft += -imgW;
container.animate({
'left': currLeft
});
return false;
});
that.find('.prev').on('click', function() {
var currLeft = parseInt(container.css('left'));
if (currLeft == 0) {
return false;
}
currLeft += imgW;
container.animate({
'left': currLeft
});
return false;
});
};
$(document).ready(function() {
$('#imgpresentation').imgSlider(2);
$('#imgpresentation2').imgSlider(3);
$('#imgpresentation3').imgSlider(4);
$('#imgpresentation4').imgSlider(1);
});
</script>
html`
<div id="imgpresentation4" class="imgpresentation">
<div class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide301" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide302" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide303" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide304" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide305" />
</div>
</div>
<div id="imgpresentation" class="imgpresentation">
<div id="slidethemimgpresentation" class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide101" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide102" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide103" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide104" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide105" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide106" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide107" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide108" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide109" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide110" />
</div>
</div>
<div id="imgpresentation2" class="imgpresentation">
<div class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide201" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide202" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide203" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide204" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide205" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide206" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide207" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide208" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide209" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide210" />
</div>
</div>
<div id="imgpresentation3" class="imgpresentation">
<div class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide301" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide302" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide303" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide304" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide305" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide306" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide307" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide308" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide309" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide310" />
</div>
</div>
最佳答案
这是一种有点棘手的方法。因为它不是由数组驱动,而是每次移动容器+= X。
您需要检查if(container.style.left + imgW >totalWidth)
要调试,请尝试使用 console.log(container.style.left )
我建议使用现有的 slider ,iDangerio.us Swiper 非常好,具有出色的 API。
另外,这有点低效,但并不是太重要,因为它只在 init 上运行。
var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation')
只解析一次 jquery 对象会是更好的做法,也更高效。
var that = $(this),
img = that.find('img'),
imgW = img.outerWidth(),
imgH = img.outerHeight(),
imgL = img.length,
container = that.find('.slidethemimgpresentation'),
totalWidth = imgW * imgL;
关于javascript - 如何在最后一张幻灯片后停止动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24422100/
这个问题在这里已经有了答案: “return” and “try-catch-finally” block evaluation in scala (2 个回答) 7年前关闭。 为什么method1返
我有一个动态列表,需要选择最后一项之前的项目。 drag your favorites here var lastLiId = $(".album
我想为每个线程执行特定操作,因此,我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”? 谢谢。 最佳答案
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗?另外,do 的意义何
我想为每个线程执行特定操作,因此,我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”? 谢谢。 最佳答案
有没有可能 finally 不会被调用但应用程序仍在运行? 我在那里释放信号量 finally { _semParallelUpdates.Re
我收藏了 对齐的元素,以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设
我正在阅读 Jon Skeet 的 C# in Depth . 在第 156 页,他有一个示例, list 5.13“使用多个委托(delegate)捕获多个变量实例化”。 List list = n
我在 AM4:AM1000 范围内有一个数据列表(从上到下有间隙),它总是被添加到其中,我想在其中查找和总结最后 4 个结果。但我只想找到与单独列相对应的结果,范围 AL4:AL1000 等于单元格
我最近编写了一个运行良好的 PowerShell 脚本 - 然而,我现在想升级该脚本并添加一些错误检查/处理 - 但我似乎被第一个障碍难住了。为什么下面的代码不起作用? try { Remove-
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
使用 Django 中这样的模型,如何检索 30 天的条目并计算当天添加的条目数。 class Entry(models.Model): ... entered = models.Da
我有以下代码。 public static void main(String[] args) { // TODO Auto-generated method stub
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
这个问题已经有答案了: Multiple returns: Which one sets the final return value? (7 个回答) 已关闭 8 年前。 我正在经历几个在工作面试中
$ cat n2.txt apn,date 3704-156,11/04/2019 3704-156,11/22/2019 5515-004,10/23/2019 3732-231,10/07/201
我可以在 C/C++ 中设置/禁用普通数组最后几个元素的读(或写)访问权限吗?由于我无法使用其他进程的内存,我怀疑这是可能的,但如何实现呢?我用谷歌搜索但找不到。 如果可以,怎样做? 因为我想尝试这样
我想使用在这里找到的虚拟键盘组件 http://www.codeproject.com/KB/miscctrl/touchscreenkeyboard.aspx就像 Windows 中的屏幕键盘 (O
我正在运行一个 while 循环来获取每个对话的最新消息,但是我收到了错误 [18-Feb-2012 21:14:59] PHP Warning: mysql_fetch_array(): supp
这个问题在这里已经有了答案: How to get the last day of the month? (44 个答案) 关闭 8 年前。 这是我在这里的第一篇文章,所以如果我做错了请告诉我...
我是一名优秀的程序员,十分优秀!