Question

我正在测试编写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>

Answer 1

更新了您的fiddle

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

    },function(){

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

为.demo元素添加了悬停处理程序。在悬停时清除间隔，这将有助于停止幻灯片放映。并在mouseout上重新设置间隔以按设定的间隔开始幻灯片放映。

Answer 2

我不知道这样的答案对你来说是否可以接受，但有一天，几年前，我在研究jquery时创建了自己的滑块。

查看您的代码，我有疑问： 1.为什么不使用fadeIn（）和fadeOut（）等标准函数进行转换？ 2.为什么不制作能够与页面上任意数量的标签同时运行的功能？

几年前，我脑子里有这些问题而且我来到这里，想要从其他人那里学习如何做到这一点。我学到了（不仅仅是在这里）。

我创建了一个可以在代码中的任何地方加载的函数 - 我研究了如何做到这一点。然后我在那里添加了淡入淡出效果和其他任何东西......

这个功能并不是很好，但可以说它会在滑块创建过程中为你提供一些亮点。很抱歉，请查看我的内容： https://jsfiddle.net/7m9j0ttL/3/

我希望我的努力对你有用。如果你想进一步讨论并提出问题 - 我很乐意回答它们。

最后评论：所以我的主要目标是创建可以像这样运行的函数：

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

所以，在这里你可以看到几乎任何标签，包含任何其他标签（包含图像，文字等）都可以滑动。

为了让所有东西在一段时间后滑落，我认为我必须将功能分为两部分：一部分接受参数，第二部分使用javascript＆＃39; 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的方式运行函数所需的所有内容（即将其放在$（＆＃39; .yourANYClassNameOrId＆＃39;）之后）

和第二个（它在文本中的位置更高 - 重新接受输入的参数并与它们一起使用。它的编写方式不是最好的方式（我现在写的要好得多）），但至少我认为如果你看一下，你就能理解一些有用的东西。

所以，如果您有任何问题和/或我可以帮助您，请告诉我。

图像滑块悬停停止和动画过渡

2 个答案: