图像滑块悬停和动画过渡
[英]Image slider hover stop and animated transition
问题描述
我正在测试将image slider编码为一个项目，以学习HTML，CSS和Javascript，并且效果很好。 我只想对其进行一些调整，并且想知道是否有人对如何执行此操作有任何想法。 请记住，我对此还比较陌生，因此不胜感激。 这是我要实现的调整：当用户hovers在图像上时，我希望slider stop在该特定图像上，以便用户可以根据需要随意观察它。 鼠标移动后，滑块将恢复运行（就我所能找到的问题而言，这里没有探讨任何主题）。 我想做的另一件事是在图像之间创建更美观的fade transition 。 有一些关于此的教程，但是对于像我这样的初学者来说，并没有提供很多背景知识。 这是jsfiddle，根据要求， http：//jsfiddle.net/7m9j0ttL/
<html>
<head>
<style type="text/css">
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<section class="demo">
<div class="container">
<div style="display: inline-block;">
<img src="Chrysanthemum.jpg" width="1024" height="768" />
</div>
<div>
<img src="Desert.jpg" width="1024" height="768" />
</div>
<div>
<img src="Hydrangeas.jpg" width="1024" height="768" />
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 9000);
});
</script>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2015-08-05 19:12:51
更新了您的小提琴
$('.demo').hover(function(){
clearInterval(autoSlide);
},function(){
autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 1000);
});
向.demo元素添加了一个悬停处理程序。 清除悬停间隔，这将有助于停止幻灯片放映。 并在鼠标移开时重新设置间隔，以按照设置的间隔开始幻灯片放映。
解决方案2
0 2015-08-05 19:32:21
我不知道您是否可以接受这种答案，但是几年前的某天，我在学习jquery时创建了自己的滑块。
查看您的代码，我有一个问题：1.为什么不使用诸如fadeIn（）和fadeOut（）之类的标准函数进行转换？ 2.为什么不创建一个可以与页面上任意数量的标签同时运行的功能？
几年前，我脑海中浮现出这些问题，然后来到这里，开始stackoverflow，向其他人学习如何做到这一点。 我学到了（不仅在这里）。
然后，我创建了一个可以在代码中任何位置加载的函数-我研究了如何做到这一点。 然后我在那儿添加了淡入淡出和滑动效果以及其他任何东西...
该功能并不是很好，但是可能会在滑块创建过程中为您带来一些帮助。 对不起，很多单词，请检查我在这里的内容： https : //jsfiddle.net/7m9j0ttL/3/
希望我的努力对您有所帮助。 如果您要进一步解决并有疑问-我很乐意回答。
最后的评论：所以我的主要目的是创建可以像这样运行的函数：
$('.container').okwbSlider({ActAsDefined: 'fadeItOut', SlidingTag: 'div', timeOut: 3000});
因此，在这里您可以看到几乎任何包含任何其他标签（带有图像，文本等）的标签都可以滑动。
为了使所有内容在一段时间后滑动，我认为我必须将功能分为2部分：一个接受参数，第二个使用javascript的setInterval进行调用。
所以，这是第一个：
(function($){
$.fn.okwbSlider = function(params) {
//outer variables
var tgDfnr = this;
var somevar = this;
var MouseStatevar = 0;
var globalTimervar = (params.globalTimervar != undefined) ? params.globalTimervar : 4000;
var ActAsDefined = (params.ActAsDefined != undefined) ? params.ActAsDefined : "fadeItOut";
var SlidingTag = (params.SlidingTag != undefined) ? params.SlidingTag : 'img';
var numberOfChildren = tgDfnr.children(SlidingTag).length;
// alert('tgDfnr='+tgDfnr+' globalTimervar='+globalTimervar+' ActAsDefined='+ActAsDefined+' numberOfChildren='+numberOfChildren);
//alert("<"+tgDfnr.prop("tagName")+" id="+tgDfnr.attr('id')+">");
if (numberOfChildren > 1){
setInterval(function(){
okwbSlideIt(tgDfnr, ActAsDefined, numberOfChildren, MouseStatevar, SlidingTag);
}, globalTimervar);
}
if(numberOfChildren == 1){
tgDfnr.children(SlidingTag).fadeIn(500, function(){
$(this).addClass('active');
});
}
}
})(jQuery);
它包含以类似于jquery的方式运行该函数所需的所有内容（即，将其放在$（'。yourANYClassNameOrId'）之后）
第二个（在文本中更高的位置-重新接受输入的参数并与它们一起使用。它的书写方式并不是最好的（我现在会写得更好），但是至少我认为如果您看一下它，您可以了解一些有用的信息。
因此，如果您有任何疑问和/或可以进一步帮助您，请告诉我。
悬停时jQuery滑块停止
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.