如何動畫setInterval使用JavaScript/JQuery的圖像滑塊？

-1

圖像突然變化，我希望它們具有滑動效果。如何動畫setInterval使用JavaScript/JQuery的圖像滑塊？

HTML

<div><img src="1.jpg" id="sliderImage"></div>

這是腳本我使用：

var myImage = document.getElementById("sliderImage"); 
var imageArray = ["1.jpg","2.jpg","3.jpg"]; 
var imageIndex = 0; 

function changeImage() { 
         myImage.setAttribute("src",imageArray[imageIndex]); 
         imageIndex++; 
         if (imageIndex >= imageArray.length){imageIndex = 0;} 
         } 

var intervalHandle = setInterval(changeImage,5000);

來源

2016-07-15 Pulkit

實現這一目標的最簡單的方法就是把使用CSS過渡效果和JavaScript設定一個計時器。它也有助於在列表中組織你的元素。由於相同的原產地策略，您無法在下面的代碼中看到圖像。嘗試它在本地和下載圖像，它應該工作。

下面是一個簡單的滑塊我已經建立https://github.com/rotexhawk/Javascript-Practice/tree/master/slider-simple

document.ready = function(){ 
 
\t 
 
\t var slides = document.querySelectorAll('#slider li'); 
 
\t 
 
\t var position = 0; 
 
\t slides[position].style.transition = '0s'; 
 
\t slides[position].style.left = '1200px'; \t 
 

 
\t var myInterval = setInterval(startSlider,4000); 
 
\t 
 
\t function startSlider(){ 
 
\t \t 
 
\t \t if (position == 3){ 
 
\t \t \t slides[position].style.transition = '0s'; 
 
\t \t \t slides[position].style.left = '1200px'; \t 
 
\t \t \t 
 
\t \t \t position = 0; 
 

 
\t \t \t slides[position].style.transition = '2s'; 
 
\t \t \t slides[position].style.left = 0; 
 

 
\t \t } 
 

 
\t \t else{ 
 
\t \t \t slides[position].style.transition = '0s'; 
 
\t \t \t slides[position].style.left = '1200px'; \t 
 
\t \t \t 
 
\t \t \t position ++; 
 

 
\t \t \t slides[position].style.transition = '2s'; 
 
\t \t \t slides[position].style.left = 0; 
 
\t \t } 
 

 
\t } 
 

 

 

 
}();

.container{ 
 
\t width: 1200px; 
 
\t box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4); 
 
\t -webkit-box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4); 
 
\t -moz-box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4); 
 
\t overflow: hidden; 
 
\t margin: 0 auto; 
 
\t padding: 5%; 
 
} 
 

 
#slider{ 
 
    width: 1200px; 
 
    height: 400px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding-left: 0; 
 
    margin: 0 auto; 
 
} 
 

 
#slider li{ 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t left: 1200px; 
 
\t top: 0; 
 
\t visibility: hidden; 
 
\t opacity:0; 
 
\t transition: 2s; 
 
} 
 

 
#slider li img{ 
 
\t width: 100%; 
 
} 
 

 
#slider-buttons ul{ 
 
\t text-align: center; 
 
} 
 
#slider-buttons ul li{ 
 
\t display: inline-block; 
 
    width: 8px; 
 
    height: 8px; 
 
    border: 3px solid #afafaf; 
 
    border-radius: 50%; 
 
    margin: 0 3px; 
 
    cursor: pointer; 
 
} 
 

 
#slider-buttons ul li.active{ 
 
\t background-color: #249CD8; 
 
} 
 

 
#slider-buttons ul li:hover{ 
 
\t background-color: #676767; 
 
} 
 

 
#effects{ 
 
\t margin-bottom: 30px; 
 
} 
 

 
#effects h4, #effects select{ 
 
\t display: inline-block; 
 
} 
 

 
#effects select{ 
 
    \t min-width: 150px; 
 
}

<div class="container"> 
 
\t <h1 class="page-title underline-text">Simple Slider</h1> 
 
\t 
 
\t <div class="slider-container"> 
 
\t 
 
\t <ul id="slider"> 
 
\t \t <li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider1.jpg"></li> 
 
\t \t <li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider2.jpg"></li> 
 
\t \t <li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider3.jpg"></li> 
 
\t \t <li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider4.jpg"></li> 
 
\t </ul> 
 
\t <div id="slider-buttons"></div> 
 
\t </div> \t

來源

2016-07-15 21:50:12

如何動畫setInterval使用JavaScript/JQuery的圖像滑塊？

回答

相關問題