Question

我制作了此视频预览幻灯片功能。我不是jQuery的新手，所以我想知道是否有更好的方法来做到这一点，每个帧只有一个单独的“计时器”会很笨拙，这意味着无法更改帧数。还是可以吗？为了示范的龙舌兰酒瓶。

$(document).ready(function() {
    var delay=1500, setTimeoutConst;
    $('.image').hover(function(){
            var id = '#' + this.id;
    	setTimeoutConst = setTimeout(function(){
            $(id).addClass('hover');
            $(id).attr('src', 'https://cdn8.bigcommerce.com/s-u9ww3di/images/stencil/1280x1280/products/6589/10932/adictivo-botella-anejo-750ml-40alcvol-hd-medal-transparent__55529.1522775464.png');
        }, delay);
   },function(){
	clearTimeout(setTimeoutConst );
   });
   
    var delay2=3000, setTimeoutConst2;
    $('.image').hover(function(){
        var id = '#' + this.id;
    	setTimeoutConst2 = setTimeout(function(){
            $(id).attr('src', 'https://products1.imgix.drizly.com/ci-hornitos-reposado-tequila-73ca9c69a1974b3b.jpeg');
        }, delay2);
   },function(){
	clearTimeout(setTimeoutConst2 );
   });
   
    var delay3=4500, setTimeoutConst3;
    $('.image').hover(function(){
        var id = '#' + this.id;
    	setTimeoutConst3 = setTimeout(function(){

            $(id).attr('src', 'https://www.wallywine.com/media/catalog/product/cache/1/image/1800x/9df78eab33525d08d6e5fb8d27136e95/1/2/12183.jpg');
        }, delay3);
   },function(){
	clearTimeout(setTimeoutConst3 );
   }),
  


    $('.image').mouseleave(function(){
            $(this).removeClass('hover');
            $(this).attr('src', 'http://www.hellowcost.fr/4806-large_default/tiscaz-gold-tequila-35-70-cl.jpg');
    });
});

.image {
    height:100px;
}

<html>
	<head>
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<title>Page Title</title>
	</head>
	<body>
  <div>
    <img class="image" id='1' src="http://www.hellowcost.fr/4806-large_default/tiscaz-gold-tequila-35-70-cl.jpg" alt=""><br>
    <img class="image" id='2' src="http://www.hellowcost.fr/4806-large_default/tiscaz-gold-tequila-35-70-cl.jpg" alt="">
  </div>
	</body>
</html>

Answer 1

我已经修改了您的示例代码，并修剪掉了一些不必要的位，并将其减少为一个计时器，这样它更干净，更容易修改（我想这就是您的意思）。

首先，它初始化一些变量。一个用于存储间隔ID（而不是多个超时），一个图像索引，以便函数知道接下来要显示哪个图像，然后是图像URL数组。

悬停功能会创建间隔，然后将图像的src属性另存为该图像的数据属性（以便您稍后可以将其设置回原始图像）。

该间隔将slideshowIndex加1，如果达到图像数组的长度，则将其设置回0。这意味着您可以将图像添加到阵列（或将其删除），它将始终正确循环。当您更改数组中的图像列表（我认为它可能是动态的）时，您无需更改间隔功能。

剩下的就是处理悬停功能，该功能清除间隔并将图像设置回其原始src。

我将添加和删除悬停类代码留在那里，以防您使用它，但是在此示例中它什么都不做。

$(document).ready(function() {
    var slideshowIntervalId = 0;
    var slideshowIndex = 0;
    var slideshowImages = [
        "https://cdn8.bigcommerce.com/s-u9ww3di/images/stencil/1280x1280/products/6589/10932/adictivo-botella-anejo-750ml-40alcvol-hd-medal-transparent__55529.1522775464.png",
        "https://products1.imgix.drizly.com/ci-hornitos-reposado-tequila-73ca9c69a1974b3b.jpeg",
        "https://www.wallywine.com/media/catalog/product/cache/1/image/1800x/9df78eab33525d08d6e5fb8d27136e95/1/2/12183.jpg"
    ];

    $(".image").hover(function() {
        var $image = $(this);
        $image.addClass("hover");
        $image.data("original-src", this.src);
        slideshowIntervalId = setInterval(function() {
            slideshowIndex = ++slideshowIndex % slideshowImages.length;
            $image.attr("src", slideshowImages[slideshowIndex]);
        }, 1500);
    },
    function() {
        $(this).removeClass("hover");
        this.src = $(this).data("original-src");
        clearInterval(slideshowIntervalId);
    });

});

.image {
    height:100px;
}

<html>
	<head>
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<title>Page Title</title>
	</head>
	<body>
  <div>
    <img class="image" id='1' src="http://www.hellowcost.fr/4806-large_default/tiscaz-gold-tequila-35-70-cl.jpg" alt=""><br>
    <img class="image" id='2' src="http://www.hellowcost.fr/4806-large_default/tiscaz-gold-tequila-35-70-cl.jpg" alt="">
  </div>
	</body>
</html>

如何使它更紧凑？悬停时的jQuery图片幻灯片显示（视频缩略图预览）

1 个答案: