Изменить изображение каждые 10 секунд

-7

Я хочу изменить изображение каждые 10 секунд в javascript, может кто-нибудь мне помочь?Изменить изображение каждые 10 секунд

Вот образы, я только хочу добавить код на JavaScript без изменения этих код ниже

HTML

<body onload = "imageChanger()"> 
    <div> 
     <ul> 
      <li><img src = "images/img1.jpg"/></li> 
      <li><img src = "images/img2.jpg"/></li> 
      <li><img src = "images/img3.jpg"/></li> 
      <li><img src = "images/img4.jpg"/></li> 
     </ul> 
    </div> 
</body>

CSS

div {margin: 50px auto; height: 500px; width: 800px; overflow: hidden; border: 10px solid;} 
img {width: 800px; height: 500px;} 
ul {list-style-type: none; padding: 0; margin: 0;}

Я хочу, чтобы добавить некоторые код, который изменит изображение при загрузке:

function imageChanger() 
{ 
    //Code here 
}

источник

2015-09-28 Joshua C. Tuonan

Что вы пробовали? Покажите свои попытки. Я предлагаю заглянуть в функцию 'setInterval()' – musefan

посмотреть любой слайдер изображения в Интернете: https://www.google.com/search?q=javascript+image+slider –

'var i = 0; setInterval (функция() {$ ('li: eq (' + (i ++% 4) + ')'. show(). siblings(). hide();}, 10000); ' – Tushar

Вы можете использовать setInterval() для этого.

Код

var i = 0; 

setInterval(changeImage, 10000); 
changeImage(); //Initial call to hide the images on start 

function changeImage() { 
    i = (i + 1) % $('li').length; //Make sure the list wraps back to 0 

    $('li:eq(' + i + ')').show().siblings().hide(); 
}

Fiddle

источник

2015-09-28 14:32:00

, что он не работает –

Что именно не работает? Просто утверждая, что он не работает, мы не можем помочь вам решить вашу проблему. –

- это JQuery? –

Вот что я сделал для подобного сценария.

<body id="background"> 
<script> 
$(function() { 
    var imageArray = ['BG-1.jpg', 'BG-2.jpg', 'BG-3.jpg', 'BG-4.jpg', 'BG-5.jpg', 'BG-6.jpg', 'BG-7.jpg', 'BG-8.jpg', 'BG-9.jpg', 'BG-10.jpg', 'BG-11.jpg', 'BG-12.jpg', 'BG-13.jpg', 'BG-14.jpg', 'BG-15.jpg', 'BG-16.jpg', 'BG-17.jpg', 'BG-18.jpg', 'BG-19.jpg', 'BG-20.jpg', 'BG-21.jpg', 'BG-22.jpg'] 

// on page load 
$('#background').css({ 'background-image': 'url(/Content/img/BackGround/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' }) 

// every 10 seconds change to random image name in the array 
setInterval(function() { 
    $('#background').css({ 'background-image': 'url(/Content/img/BackGround/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' }) 
    }, 10000); 
}); 
</script> 
</body>

источник

2015-09-28 15:59:53 shaun

Изменить изображение каждые 10 секунд

ответ

Смежные вопросы