图像滑块悬停和动画过渡

Question

I was testing out coding an image slider as a project to learn HTML, CSS and Javascript and it works great. 我正在测试将image slider编码为一个项目，以学习HTML，CSS和Javascript，并且效果很好。 I'd just like to implement a few tweaks on it and was wondering if anyone had any idea on how to do this. 我只想对其进行一些调整，并且想知道是否有人对如何执行此操作有任何想法。 Bear in mind, I'm relatively new to this so a few explanatory comments would be greatly appreciated. 请记住，我对此还比较陌生，因此不胜感激。 Here are the tweaks I'd like to implement: When the user hovers over the image, I'd like the slider to stop on that particular image so the user can look at it for as long as they wish. 这是我要实现的调整：当用户hovers在图像上时，我希望slider stop在该特定图像上，以便用户可以根据需要随意观察它。 The slider resumes once the mouse is moved (a topic not explored on any questions here as far as I can find). 鼠标移动后，滑块将恢复运行（就我所能找到的问题而言，这里没有探讨任何主题）。 Another thing I'd like to be able to do is create a more aesthetic fade transition between the images. 我想做的另一件事是在图像之间创建更美观的fade transition 。 There are tutorials out there for this but they don't give a lot of context for a beginner like me to implement it. 有一些关于此的教程，但是对于像我这样的初学者来说，并没有提供很多背景知识。 Here's the jsfiddle, as requested, http://jsfiddle.net/7m9j0ttL/ 这是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>

Answer 1

Updated your fiddle 更新了您的小提琴

 $('.demo').hover(function(){
     clearInterval(autoSlide);

    },function(){

     autoSlide = setInterval(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
   }
   cycleItems();
   }, 1000);
  });

Added a hover handler to the .demo element. 向.demo元素添加了一个悬停处理程序。 Cleared interval on hover, this would help stop the slide show. 清除悬停间隔，这将有助于停止幻灯片放映。 And re-set interval on mouseout to start the slideshow per the set interval. 并在鼠标移开时重新设置间隔，以按照设置的间隔开始幻灯片放映。

Answer 2

I don't know whether such kind of answer is acceptable for you, but someday, a few years ago, I created my own slider when I was studying jquery. 我不知道您是否可以接受这种答案，但是几年前的某天，我在学习jquery时创建了自己的滑块。

Looking at your code, I have questions: 1. Why don't you use rather standard functions like fadeIn() and fadeOut() for transitions? 查看您的代码，我有一个问题：1.为什么不使用诸如fadeIn（）和fadeOut（）之类的标准函数进行转换？ 2. Why don't you make a function that will be able to run simultaneously with any number of tags on the page? 2.为什么不创建一个可以与页面上任意数量的标签同时运行的功能？

A few years ago I had these questions in my head and I came here, to stackoverflow to learn how to do that from other people. 几年前，我脑海中浮现出这些问题，然后来到这里，开始stackoverflow，向其他人学习如何做到这一点。 And I learnt (not only here, though). 我学到了（不仅在这里）。

And I created a function that could be loaded anywhere in the code - I studied how to do that. 然后，我创建了一个可以在代码中任何位置加载的函数-我研究了如何做到这一点。 Then I added fade and slide effects there and also any other things... 然后我在那儿添加了淡入淡出和滑动效果以及其他任何东西...

This function is not really good, but PROBABLY it will sched some light for you in slider creation process. 该功能并不是很好，但是可能会在滑块创建过程中为您带来一些帮助。 Sorry for many words, check what I have here: https://jsfiddle.net/7m9j0ttL/3/ 对不起，很多单词，请检查我在这里的内容： https : //jsfiddle.net/7m9j0ttL/3/

I hope my effort is useful for you. 希望我的努力对您有所帮助。 If you are going to go further with this and have questions - I would be glad to answer them. 如果您要进一步解决并有疑问-我很乐意回答。

Last comments: So my main aim was to create function that could be ran like this: 最后的评论：所以我的主要目的是创建可以像这样运行的函数：

$('.container').okwbSlider({ActAsDefined: 'fadeItOut', SlidingTag: 'div', timeOut: 3000});

so, here you can see that almost ANY tag, containing ANY other tags (with images, text etc in it) can be slided. 因此，在这里您可以看到几乎任何包含任何其他标签（带有图像，文本等）的标签都可以滑动。

in order to make everything slided after some time, I thought that I have to break function in 2 parts: one accepts parameters and the second is called using javascript's setInterval. 为了使所有内容在一段时间后滑动，我认为我必须将功能分为2部分：一个接受参数，第二个使用javascript的setInterval进行调用。

So, here's the first one: 所以，这是第一个：

(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);

it contains everything that needed to run the function in jquery-like way (ie placing it after $('.yourANYClassNameOrId')) 它包含以类似于jquery的方式运行该函数所需的所有内容（即，将其放在$（'。yourANYClassNameOrId'）之后）

and the second one (it's place higher in the text - re-accepts the entered parameters and works with them. It's written not in the really best way (I would write it much better now), but at least I think if you look at it, you can understand something useful. 第二个（在文本中更高的位置-重新接受输入的参数并与它们一起使用。它的书写方式并不是最好的（我现在会写得更好），但是至少我认为如果您看一下它，您可以了解一些有用的信息。

So, let me know if you have questions and/or I can help you further. 因此，如果您有任何疑问和/或可以进一步帮助您，请告诉我。

图像滑块悬停和动画过渡

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-08-05 19:12:51

解决方案2
0 2015-08-05 19:32:21

图像滑块悬停和动画过渡

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-08-05 19:12:51

解决方案2 0 2015-08-05 19:32:21

解决方案1
1 已采纳 2015-08-05 19:12:51

解决方案2
0 2015-08-05 19:32:21