如何使它更緊湊？懸停時的jQuery圖片幻燈片顯示（視頻縮略圖預覽）

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屬性另存為該圖像的數據屬性（因此您可以稍后將其設置回原始圖像）。

該間隔將1添加到slideshowIndex ，如果達到圖像數組的長度，則將其設置回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 個解決方案

解決方案1
0 已采納 2018-07-03 14:06:37

如何使它更緊湊？ 懸停時的jQuery圖片幻燈片顯示（視頻縮略圖預覽）

問題描述

1 個解決方案

解決方案1 0 已采納 2018-07-03 14:06:37

如何使它更緊湊？懸停時的jQuery圖片幻燈片顯示（視頻縮略圖預覽）

解決方案1
0 已采納 2018-07-03 14:06:37