Auto ImageSlider無法與SetInterval（）配合使用-JavaScript / JQuery

Question

問題：想要創建一個簡單的javascript / jquery自動圖像滑塊，但是似乎不起作用。

 // jquery // $(document).ready(function() { $("#imgSlider_img1").show(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); }) // slider // var current_image_number = 1; function slider() { if (current_image_number == 1) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").show('fast'); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 2; } if (current_image_number == 2) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").show('fast'); $("#imgSlider_img4").hide(); current_image_number = 3; } if (current_image_number == 3) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").show('fast'); current_image_number = 4; } if (current_image_number == 4) { $("#imgSlider_img1").show('fast'); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 1; } } window.setInterval(slider, 4000); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; } .imgSlider img { width: 100%; height: 100%; } 

 <div class="imgSlider"> <img id="imgSlider_img1" src="images/index/imgSlider_img1.png"> <img id="imgSlider_img2" src="images/index/imgSlider_img2.jpg"> <img id="imgSlider_img3" src="images/index/imgSlider_img3.jpg"> <img id="imgSlider_img4" src="images/index/imgSlider_img4.jpg"> </div> 

邏輯：我想使用當前的html方案制作一個簡單的自動滑塊。 我希望能夠在'imgSlider'div內遞增，或者通過ID更改圖像（如當前圖像）。 但是問題在於每個間隔之后，所有圖像都會顯示出來。

任何幫助表示贊賞！

Answer 1

對於4個if's ，將執行所有if's 。 因此，讓我們說在入口點index的值為1 。 這將是true的第一if它會索引設置為2 。 現在，第二if條件也變得true ，它會設置索引為3依此類推，直到它重置值恢復為1。

因此， if's要代替4， if's需要使用if else

 // jquery // $(document).ready(function(){ $("#imgSlider_img1").show(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); }) // slider // var current_image_number = 1; function slider() { if (current_image_number == 1) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").show('fast'); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 2; } else if (current_image_number == 2) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").show('fast'); $("#imgSlider_img4").hide(); current_image_number = 3; } else if (current_image_number == 3) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").show('fast'); current_image_number = 4; } else if (current_image_number == 4) { $("#imgSlider_img1").show('fast'); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 1; } } window.setInterval(slider, 4000); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; } .imgSlider img { width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgSlider"> <img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png"> <img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg"> <img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg"> <img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg"> </div> 

您可以進一步簡化代碼以使其遵循

 // jquery // $(document).ready(function(){ $(".imgSlider > img").hide(); // hide all images $("#imgSlider_img1").show(); // show 1st image }); var current_image_number = 1; function slider() { $(".imgSlider > img").hide(); // hide all images current_image_number = ++current_image_number > 4 ? 1 : current_image_number; // calculate the next image $("#imgSlider_img" + current_image_number).show('fast'); // show the image } window.setInterval(slider, 4000); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; } .imgSlider img { width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgSlider"> <img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png"> <img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg"> <img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg"> <img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg"> </div> 

Answer 2

我對您的JS邏輯進行了一些簡化，以使事情更加清楚。 簡化的JS還允許您從HTML中添加或刪除圖像，而無需觸摸JS：

 // all images var images = document.querySelectorAll('.imgSlider img'); // currently active number var active = 1; // slider function activate() { for (var i=0; i<images.length; i++) { images[i].style.display = 'none'; } // display the active image; document.querySelector('#imgSlider_img' + active).style.display = 'block'; // increment the active image number active++; if (active > images.length) active = 1; } window.setInterval(activate, 3000); activate(); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; position: relative; } .imgSlider img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 

 <div class="imgSlider"> <img id="imgSlider_img1" src="https://placeimg.com/640/480/1.jpg"> <img id="imgSlider_img2" src="https://placeimg.com/640/480/2.jpg"> <img id="imgSlider_img3" src="https://placeimg.com/640/480/3.jpg"> <img id="imgSlider_img4" src="https://placeimg.com/640/480/4.jpg"> </div> 

為此，您需要增加存儲當前活動圖像的整數。 您想在更改圖像的函數中執行此操作。

當增加該活動圖像編號時，還應檢查增加的編號是否大於最大圖像數量。 如果是這樣，則應將活動圖像編號設置為1。

這里的所有都是它的！

Answer 3

如果出現許多圖像，則意味着上述條件是否解決了問題。 所以我建議使用以下類型的JavaScript圖像滑塊。

 var _imgPath = { "imageDetails": [{ "Id": "F0001", "Name": "figure1.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png' }, { "Id": "F0002", "Name": "figure2.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png' }, { "Id": "F0003", "Name": "figure3.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png' }, { "Id": "F0004", "Name": "figure4.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/barbara.png' }, { "Id": "F0005", "Name": "figure5.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/boat.png' }, { "Id": "F0006", "Name": "figure6.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/cat.png' }, { "Id": "F0007", "Name": "figure7.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/fruits.png' }, { "Id": "F0008", "Name": "figure8.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/frymire.png' }, { "Id": "F0009", "Name": "figure9.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/girl.png' }, { "Id": "F00010", "Name": "figure10.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/monarch.png' } ] } var currentImage, LastImage; function initLoader(arg_imgPath) { if (arg_imgPath.imageDetails.length > 0) { sliderImgTag.src = arg_imgPath.imageDetails[0]['Src']; sliderImgTag.setAttribute('cid', arg_imgPath.imageDetails[0]['Id']); sliderImgTag.setAttribute('alt', arg_imgPath.imageDetails[0]['name']); currentImage = 0; document.querySelector('.Prod_Arrow.left').style.visibility = "hidden" } document.querySelector('.Prod_Arrow.right').addEventListener('click', function () { btnArrowShift((currentImage + 1), true); }) document.querySelector('.Prod_Arrow.left').addEventListener('click', function () { btnArrowShift((currentImage - 1), false); }) } initLoader(_imgPath); document.querySelector('.Prod_Arrow.right').addEventListener('click', function () { btnArrowShift((currentImage + 1), true); }) document.querySelector('.Prod_Arrow.left').addEventListener('click', function () { btnArrowShift((currentImage - 1), false); }) function btnArrowShift(value, types) { if (types) { if (value != _imgPath.imageDetails.length) { document.querySelector('.Prod_Arrow.left').style.visibility = "visible" sliderImgTag.src = _imgPath.imageDetails[value]['Src']; sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']); sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']); currentImage = value; if (value === (_imgPath.imageDetails.length - 1)) { document.querySelector('.Prod_Arrow.right').style.visibility = "hidden"; } } } else { if (value != _imgPath.imageDetails.length) { document.querySelector('.Prod_Arrow.right').style.visibility = "visible" sliderImgTag.src = _imgPath.imageDetails[value]['Src']; sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']); sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']); currentImage = value; if (value === 0) { document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"; } } } } setInterval(function () { if (currentImage != _imgPath.imageDetails.length) { if (currentImage === (_imgPath.imageDetails.length - 1)) { currentImage = 0; document.querySelector('.Prod_Arrow.right').style.visibility = "visible"; document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"; } else if(currentImage === (0)) { currentImage = currentImage + 1; document.querySelector('.Prod_Arrow.left').style.visibility = "visible"; } else if(currentImage !== (0)){ currentImage = currentImage + 1; document.querySelector('.Prod_Arrow.left').style.visibility = "visible"; } sliderImgTag.src = _imgPath.imageDetails[currentImage]['Src']; sliderImgTag.setAttribute('cid', _imgPath.imageDetails[currentImage]['Id']); sliderImgTag.setAttribute('alt', _imgPath.imageDetails[currentImage]['name']); } }, 5000) 

 @import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700"); /* font-family: 'Nunito', sans-serif; */ :after, :before, * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *::selection { background: transparent; } .Prod-dialog * { font-family: "Nunito", sans-serif; } .Prodclear { clear: both; } .Prod-pull-right { float: right !important; } .Prod-pulk-left { float: left !important; } .Prod-col-4 { width: 45%; float: left; padding: 0px 15px; } .Prod-col-8 { width: 55%; float: left; padding: 0px 15px 0px 30px; } /* dialog start */ .Prod-dialog.active { visibility: visible; position: fixed; background: rgb(33, 32, 32); left: 0px; right: 0px; bottom: 0px; top: 0px; transition: all 0.5s; padding: 30px; z-index: 99999; } .Prod-container { max-width: 1440px; background: #fff; margin: auto; /* box-shadow: 0px 0px 15px #ffffff; */ padding: 0px; margin-top: 50px; max-height: calc(100vh - 90px); overflow-y: auto; background: linear-gradient(to right, white 44%, #f9fafb 44%); } .Prod-Gallery-footer .Prod-col-8 { padding-right: 0px; } /* width */ .Prod-container::-webkit-scrollbar, .Prod_slider::-webkit-scrollbar { width: 10px; height: 10px; } /* Track */ .Prod-container::-webkit-scrollbar-track, .Prod_slider::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ .Prod-container::-webkit-scrollbar-thumb, .Prod_slider::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } /* Handle on hover */ .Prod-container::-webkit-scrollbar-thumb:hover { background: #555; } .Prod-scroll-hidden { overflow: hidden; } #Prod-dialog-close { position: absolute; right: 40px; top: 15px; width: 40px; height: 40px; opacity: 1; background: #fff; border-radius: 50%; } #Prod-dialog-close:hover { opacity: 1; } #Prod-dialog-close:before, #Prod-dialog-close:after { position: absolute; left: 19px; content: " "; height: 24px; width: 2px; background-color: #212020; z-index: 4; /* z-index: 888; */ top: 9px; } #Prod-dialog-close:before { transform: rotate(45deg); } #Prod-dialog-close:after { transform: rotate(-45deg); } /* dialog end */ /* header start */ .Prod-header h2 { color: #252525; font-size: 26px; font-weight: 700; line-height: 33px; text-align: left; position: relative; margin: 0px 0px 25px 0px; padding: 0px 0px 15px 0px; } .Prod-header h2:before { position: absolute; content: ""; width: 65px; height: 3px; background: #fa7000; bottom: 0px; } /* header end*/ /* footer start */ .Prod-footer { padding: 15px; background: #fff; } .Prod-footer p { color: #6a7070; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; margin: 0px; } .Prod-footer pa { color: #6a7070; text-decoration: none; } /* footer end */ /* form start*/ .Prod-invoice-sec { max-width: 994px; margin: auto; /* background: #f1f1f1; background: linear-gradient(to right, white 40%, #f9fafb 40%); */ margin-bottom: 0px; padding-bottom: 0px; padding: 30px; border-bottom: 1px solid #979797; } .Prod-col-6 { width: 50%; padding: 0px 15px; float: left; } .Prod-row { margin: 0px -15px; } .Prod-form-row { margin-bottom: 15px; } .Prod-form-row label { color: #9b9b9b; font-size: 16px; font-weight: 600; line-height: 19px; } .Prod-form-row p { color: #252525; font-size: 16px; font-weight: 600; line-height: 22px; margin: 0px; } /* form end*/ /* Gallery Start */ .Prod-Gallery { margin: 15px 0px; } .Prod-Gallery-Header { position: relative; border-bottom: 1px solid #979797; padding-bottom: 8px; } .Prod-Gallery-Header h2 { color: #6a7070; font-size: 16px; font-weight: 900; line-height: 19px; margin: 0px; padding: 10px 0px; display: inline-block; } .Prod-tabs { margin: 0px; padding: 0px; position: absolute; right: 0px; top: 5px; } .Prod-tabs li { margin: 0px; padding: 0px; display: inline-block; font-size: 16px; line-height: 32px; padding: 0px 8px 0px 8px; position: relative; cursor: pointer; border-radius: 6px; } ul.Prod-tabs img { width: 18px; vertical-align: middle; cursor: pointer; } li#Prod-tab1.active, li#Prod-tab2.active { background: #ddd; } .Prod-Gallery-body { padding: 15px 0px 15px 0px; } /* Gallery Start */ /* Tab Start */ .Prod-tab-link.current { background: #d8d8d8; color: #5b5b5b; } .Prod-tab-link.current { display: inline-block; } .Prod-tab-content { display: none; } .Prod-tab-content.current { display: block; } li#ProdSelectedTab.current { background: transparent; } /* Tab End*/ /* selected */ .Prod-grid-group li { position: relative; } .Prod-grid-group li.selected { position: relative; } .Prod-grid-group li.selected:after { content: ""; display: block; position: absolute; background: rgba(250, 112, 0, 0.6); left: 0px; right: 0px; top: 0px; bottom: 0px; } .Prod-grid-group li.selected:before { content: ""; display: block; width: 18px; height: 30px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); position: absolute; top: 35px; left: 50px; z-index: 1; } .Prod-grid-group { margin: 0px; padding: 0px; margin-left: -15px; } .Prod-grid-group li { margin: 0px; padding: 0px; width: 110px; height: 110px; list-style-type: none; display: inline-block; overflow: hidden; margin-left: 16px; margin-bottom: 16px; border-radius: 5px; } .Prod-grid-group li img { max-width: 100%; } table.Prod-table { border-collapse: collapse; width: 100%; } table.Prod-table tfoot tr td { border-top: 1px solid #979797; border-bottom: 1px solid #979797; padding: 18px 0px; font-size: 18px; } table.Prod-table td, table.Prod-table th { text-align: left; } table.Prod-table tr th, table.Prod-table tr td { padding: 5px 40px 10px 0px; } .Prod-table thead th { font-weight: 700; color: #6a7070; font-size: 16px; } .Prod-table tbody td { font-size: 16px; font-weight: 600; line-height: 22px; text-align: left; color: #252525; } .Prod-table tfoot td { font-weight: 700; color: #252525; font-size: 16px; } .Prod-payment-action { padding: 50px 0px 0px 0px; text-align: right; } .Prod-payment-action button { border: 2px solid #fa7000; opacity: 0.8; border-radius: 5px; display: inline-block; padding: 8px 15px; background: transparent; text-transform: uppercase; color: #fa7000; font-weight: 700; margin-left: 15px; } .Prod-payment-action button:hover { color: #fff; background-color: #fa7000; box-shadow: 0 2px 6px 4px rgba(250, 112, 0, 0.25); } /* slider start */ .Prod_slider { white-space: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: 35px; } .lSSlideOuter .lSPager.lSGallery img { width: 100%; } /* slider End */ .Prod_slider ul li { white-space: nowrap; margin-bottom: 0px; } .Prodt-mark { position: relative; width: 20px; height: 20px; border: 1px solid #bfc3c3; float: left; margin-right: 10px; top: 5px; border-radius: 4px; } .Prodt-mark::before { content: ""; display: block; width: 6px; height: 14px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 0px; left: 6px; z-index: 1; } .Prod-tab-link.current .Prodt-mark { background: #bfc3c3; } .Prod-tab-link.current .Prodt-mark::before { content: ""; display: block; width: 6px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 0px; left: 6px; z-index: 1; } .Prod-Caption { margin: 8px 0px 0px 0px; font-size: 14px; } .newImgViewer { width: 150px; height: 800px; } .Prod_slider { position: relative; } .Prod_Arrow { width: 50px; height: 50px; background: #bfc3c3; border-radius: 50%; position: absolute; cursor: pointer; } .Prod_Arrow.left { left: 0px; top: 45%; } .Prod_Arrow.left::before { position: absolute; content: ""; top: 20px; left: 20px; border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .Prod_Arrow.right { right: 0px; top: 45%; } .Prod_Arrow.right::before { position: absolute; content: ""; top: 20px; left: 20px; border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .Prod-slider-view { text-align: center; position: relative; height: 450px; } .Prod-slider-view img { height: 400px; border-radius: 6px; vertical-align: middle; margin-top: 25px; } .Prod_Selected { width: 50px; height: 50px; position: absolute; top: 30px; right: 200px; border-radius: 4px; } .Prod_Selected[isselected="true"]::before { content: ""; display: block; width: 8px; height: 16px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); position: absolute; top: 15px; left: 20px; z-index: 1; } .Prod_Selected::after { content: ""; display: block; position: absolute; background: #bfc3c3; left: 0px; right: 0px; top: 0px; bottom: 0px; border-radius: 6px; } .allitems li { display: none; } .allitems li.selected { display: inline-block; } #Prod-grid-slider li.isactive { border: 4px solid #fa7000; } #Prod-grid-slider li { border: 4px solid transparent; } #ProdSelectedTab.current span.ProdAllImages { display: none; } span.ProdAllImages { display: none; } .Prod-tab-link.current span.ProdSelectedImg { display: inline-block; } 

 <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" media="screen" href="src/index.css" /> </head> <body> <div class="Prod-dialog"> <div class="Prod-container"> <div class="Prod-invoice-sec"> <div class="Prod-header"> <h2>Slider</h2> </div> <div class="Prod-container-body"> <div class="Prod-Gallery"> <div class="Prod-Gallery-body"> <!--Wrapper to contain interchanging content--> <div class="Prod-tabs-wrapper"> <div id="ProdSliderContent" class="Prod-tab-content current"> <div class="Prod-slider-view"> <img id="sliderImgTag"> <div class="Prod_Arrow left"></div> <div class="Prod_Arrow right"></div> </div> <div class="Prod_slider"> <ul class="Prod-grid-group" id="Prod-grid-slider"> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="Prod-footer"> <p>Prasanna Brabourame</p> <p>Open Source Enthusiasts</p> <p>Place: <a> Puducherry,Pondicherry,INDIA</a> </p> <p>Email: <a href="mailto:prasanna18101994@gmail.com">prasanna18101994@gmail.com</a> </p> </div> </div> <script src="src/index.js"></script> </body> </html>