淡入淡出圖像滑塊單擊上一個下一個按鈕
[英]Fade images slider click prev next button
問題描述
我正在制作一個帶有縮略圖和上一個和下一個按鈕的圖像滑塊。 當您單擊與主圖像不同的縮略圖時，我希望它淡入新的縮略圖。 上一個和下一個按鈕也是如此。
我有一個淡入淡出的 web-kit 動畫，但它不起作用。 這是代碼筆。
$('#imgDetail li img').click(function(){ $('#unidoor').attr('src',$(this).attr('src')); }); $('#next').on('click',function(){ var imgSrc = $('#unidoor').attr('src'); var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src'); console.log(nextSrc); nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc); }); $('#prev').on('click',function(){ var imgSrc = $('#unidoor').attr('src'); var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src'); console.log(nextSrc); nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc); });
* { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ } .header{ margin: 0 auto; width: 100%; background-color: #333; padding: 30px 0 0 0; } .header h1{ margin: 0; text-align: center; color: white; font-family: Arial, Helvetica, sans-serif; } .header ul { list-style-type: none; margin: 0; /* padding: 0; */ overflow: hidden; padding: 20px 0px 30px 0; text-align: center; } .header li { display: block; display: inline-block; /* border-right: 1px solid #bbb; */ border-right: 1px solid #bbb; height: 25px; } .header li:last-child{ border-right: none; } .header li a { display: block; color: white; text-align: center; text-decoration: none; padding: 0px 40px; font-size: 1em; } .header li a:hover{ color: #7bbe9a; /* color: #80b198; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor { /* position: relative; */ width: 90%; margin: 0 auto; display: block; } #prev { position: absolute; float: left; bottom: 55%; left: 5%; cursor: pointer; font-weight: bold; } #next { position: absolute; float: right; bottom: 55%; right: 5%; cursor: pointer; font-weight: bold; width: auto; } .previous { background-color: #fff; opacity: 0.5; color: black; width: auto; } .next { background-color: #fff; opacity: 0.5; color: black; } #imgDetail a { text-decoration: none; display: inline-block; padding: 8px 16px; } #imgDetail a:hover { background-color: #7bbe9a; color: white; opacity: 1; } #imgDetail ul { margin: 0 auto; display: block; width: 50%; } /* fade animation */ #fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .thumb { width: 25%; height: auto; margin: 15px 5px 0 5px; } #imgDetail li { display: inline; margin-right: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Daniel Pollack</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body id="green-room"> <div class="header"> <div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div> <nav id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html#portfolio">Portfolio</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> <div class="slideshow-container"> <div id="imgDetail"> <br> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" /> <a href="#" id="prev" class="prev-next-button previous">‹</a> <a href="#" id="next" class="prev-next-button next">›</a> <ul> <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" id="fade" class="thumb" /></li> <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" id="fade" class="thumb" /></li> <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" id="fade" class="thumb" /></li> </ul> </div> </div> <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script> <script> window.sr = ScrollReveal({reset: true}); sr.reveal('#unidoor'); </script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2017-09-27 02:04:14
在您的方法中，您需要執行一些代碼，我對您的代碼進行了一些更改，您可以在代碼示例中看到它。
首先，您需要根據需要滑動的圖像創建縮略圖。
其次，您不應該將每個圖像的 src 屬性設置為下一個src （圖像 URL），因為每次下載圖像時，您都應該將所有圖像保存在緩存中並下載一次。
第三，您應該只在一個函數中監聽previous和next箭頭的 onclick 事件，也許最好將它們分成兩個函數來為下一個和上一個按鈕分配單一職責。
第四，你應該只使用 css 類為每張幻燈片制作淡入淡出效果，比動畫簡單，在演示代碼中我創建了active類以使其作為淡入淡出效果工作
我希望你能發現它有幫助。
$(document).ready(function(){ // get all images loaded var images = $(".unidoor-class"); // thumbnails containers var thumbnailContainer = $("#thumbnails"); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(".prev-next-button").on("click", function() { // get the images var currentImageIndex = $(".unidoor-class.active").index(); var isPrevious = $(this).hasClass("previous"); var nextIndex; if (isPrevious) { if (currentImageIndex === 0) { nextIndex = images.length - 1; } if (currentImageIndex > 0) { nextIndex = currentImageIndex - 1; } } else { if (currentImageIndex === images.length - 1) { nextIndex = 0; } if (currentImageIndex < images.length - 1) { nextIndex = currentImageIndex + 1; } } // remove any active class from images images.removeClass("active"); // get the next active image and add active class to that next current image $(images[nextIndex]).addClass("active"); }); $(".thumb").on("click", function(event){ event.preventDefault(); var indexSelected = $(this).data("img-index"); var currentShown = $(".unidoor-class.active").index(); if (currentShown === indexSelected) return false; images.removeClass("active"); $(images[indexSelected]).addClass('active'); }); function generateThumbnails(images, container) { var ul = $("<ul>"); images.each(function(index, element){ var currentThumb = $("<img>"); var li = $("<li>"); var src = $(this).attr("src"); currentThumb.attr("src", src); currentThumb.attr("class", "thumb"); currentThumb.data("img-index", index); li.append(currentThumb); ul.append(li); }); container.append(ul); } });
* { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ } .header{ margin: 0 auto; width: 100%; background-color: #333; padding: 30px 0 0 0; } .header h1{ margin: 0; text-align: center; color: white; font-family: Arial, Helvetica, sans-serif; } .header ul { list-style-type: none; margin: 0; /* padding: 0; */ overflow: hidden; padding: 20px 0px 30px 0; text-align: center; } .header li { display: block; display: inline-block; /* border-right: 1px solid #bbb; */ border-right: 1px solid #bbb; height: 25px; } .header li:last-child{ border-right: none; } .header li a { display: block; color: white; text-align: center; text-decoration: none; padding: 0px 40px; font-size: 1em; } .header li a:hover{ color: #7bbe9a; /* color: #80b198; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor, .unidoor-class { position: absolute; width: 100%; margin: 0 auto; display: block; top: 0; left: 0; opacity: 0; transition: opacity .5s; } .unidoor-class.active { position: relative; opacity: 1; } #prev { position: absolute; float: left; bottom: 55%; left: 5%; cursor: pointer; font-weight: bold; } #next { position: absolute; float: right; bottom: 55%; right: 5%; cursor: pointer; font-weight: bold; width: auto; } .previous { background-color: #fff; opacity: 0.5; color: black; width: auto; } .next { background-color: #fff; opacity: 0.5; color: black; } #imgDetail { position: relative; width: 90%; margin: 0 auto; } #imgDetail a { text-decoration: none; display: inline-block; padding: 8px 16px; } #imgDetail a:hover { background-color: #7bbe9a; color: white; opacity: 1; } #imgDetail ul { margin: 0 auto; display: block; width: 50%; } /* fade animation */ #fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .thumb { width: 25%; height: auto; margin: 15px 5px 0 5px; } #imgDetail li { display: inline; margin-right: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="slideshow-container"> <div id="imgDetail"> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" /> <!--CONTROLS--> <a href="#" id="prev" class="prev-next-button previous">‹</a> <a href="#" id="next" class="prev-next-button next">›</a> <!--Thumbnails--> <div id="thumbnails"> </div> </div> </div>
我的jquery滑塊運行良好，但是存在一個錯誤，有時它在下一次或上一個單擊時不顯示圖像
[英]my jquery slider is running well but there is bug that it sometimes does'nt shows images on next or prev click
Slider 手動控制允許上一個/下一個按鈕從最后一張幻燈片單擊到第一張幻燈片
[英]Slider manual control to allow prev/next button to click from last slide to first slide
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.