如何淡入此Javascript

-1

我有一個JavaScript滑塊下面的代碼，想知道如何淡入淡出的圖像，而不是讓他們只是一個接一個地出現。我希望那裏沒有jQuery。如何淡入此Javascript

imgs_array = [ 
       "http://www.w3schools.com/bootstrap/img_chania.jpg", 
       "http://www.w3schools.com/bootstrap/img_chania2.jpg", 
       "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRWnEWQ-9qlQAdlD4a5sRYTWAiWblI8NMfw5bBS5buGrPdYoRxbIgQdAUY" 
       ]; 
imgs  = imgs_array.length; 

function next(){  
    img  = document.getElementById("slider-img"); 
    img_id = img.dataset.sliderId; 

    if(img_id != imgs){ 
     img.src = imgs_array[img_id++]; 
     img.setAttribute("data-slider-id", img_id++); 
    }else{ 
     img.src = imgs_array[1]; 
     img.setAttribute("data-slider-id", 1); 
    } 


} 

setInterval(next, 3000);

對圖像的代碼是在這裏

<img id="slider-img" data-slider-id="1" src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="slide" />

非常感謝

來源

2016-03-07 Yasar Mahmood

你可以使用CSS過渡。如果你使用jquery，$（'img [data-slider-id = 1]'），那麼 – NiZa

會更容易。fadeI（） –

@NiZa我會怎麼做呢？ –

像這樣的事情？

imgs_array = [ 
 
    "http://www.w3schools.com/bootstrap/img_chania.jpg", 
 
    "http://www.w3schools.com/bootstrap/img_chania2.jpg", 
 
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRWnEWQ-9qlQAdlD4a5sRYTWAiWblI8NMfw5bBS5buGrPdYoRxbIgQdAUY" 
 
]; 
 
imgs = imgs_array.length; 
 

 
function next() { 
 
    img = document.getElementById("slider-img"); 
 
    img.className = ""; 
 

 
    setTimeout(function() { 
 
    setTimeout(function() { 
 
     img_id = img.dataset.sliderId; 
 
     if (img_id != imgs) { 
 
     img.src = imgs_array[img_id++]; 
 
     img.setAttribute("data-slider-id", img_id++); 
 
     } else { 
 
     img.src = imgs_array[1]; 
 
     img.setAttribute("data-slider-id", 1); 
 
     } 
 
    }, 1); 
 
    img.className = "visible"; 
 
    }, 500); 
 

 
} 
 

 
setInterval(next, 3000);

img { 
 
    opacity: 0; 
 
    -webkit-transition: opacity .5s; 
 
    transition: opacity .5s; 
 
} 
 

 
img.visible { 
 
    opacity: 1; 
 
}

<img id="slider-img" data-slider-id="1" class="visible" width="600" height="300" src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="slide" />

來源

2016-03-07 19:05:04 NiZa

非常感謝，它的工作！ –

如何淡入此Javascript

回答

相關問題