个人中心
gpt4 book ai didi

javascript - 图像 slider 悬停停止和动画过渡

转载 作者：太空宇宙 更新时间：2023-11-04 11:34:29 24 4
gpt4 key购买 nike

我正在测试将 image slider 编码作为一个元素来学习 HTML、CSS 和 Javascript，它运行良好。我只想对其进行一些调整，想知道是否有人对如何执行此操作有任何想法。请记住，我对此比较陌生，因此非常感谢一些解释性评论。以下是我想要实现的调整:当用户 将鼠标悬停 在图像上时，我希望 slider 在该图像上停止特定图像，以便用户可以根据需要查看它。移动鼠标后 slider 会恢复(据我所知，这里没有探讨任何问题的主题)。我想做的另一件事是在图像之间创建更美观的 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>

最佳答案

更新了您的 fiddle 

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

    },function(){

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

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

关于javascript - 图像 slider 悬停停止和动画过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31840029/

24 4 0
文章推荐： c++ - clock_getres 和 clock_gettime
文章推荐： linux - 如何制作 bash 脚本
文章推荐： linux - 进程处于轮询状态？
文章推荐： linux - 插入 USB 设备时获取用户输入
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com