#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Я совершенно новичок в jquery (на сегодняшний день я только что прошел курс code academy по jquery). Я пытаюсь создать слайдер изображения. Я чувствую, что у меня есть рабочая идея, но мне не хватает чего-то фундаментального. Я хочу, чтобы он просто запускался бесконечно, поэтому я настроил его на непрерывный запуск при открытии страницы. Кто-нибудь может мне помочь? В css для непрозрачности всех 5 изображений установлено значение 0, и я пытаюсь изменить его с помощью функции jquery, которую я написал.
Я знаю, что могу сделать это с помощью ключевых кадров в css. Я довольно хорошо разбираюсь в CSS. На данный момент я просто пытаюсь разобраться в javascript и jquery. Взгляните:
$(document).ready(function(){
var img = $('.slides');
for(i = 0; i <= $img.length; i ){
$img[i].style('opacity', 1);
};
}); /*gallery row*/
.img-slider-container{
margin: 10% 10%;
}
/*gallery list*/
.image-list{
}
.image-list li{
list-style: none;
display: inline-block;
}
.image-list li img{
display: block;
width: 15em;
opacity: 0;
}
/* gallery container */
.img-slider{
width: auto;
} <section class="img-slider-container row">
<div class="col-12 img-slider">
<ul class="image-list">
<li><img src="design/images/portfolio-images/one.jpg" class="slides" alt=""/></li>
<li><img src="design/images/portfolio-images/two.jpg" class="slides" alt=""/></li>
<li><img src="design/images/portfolio-images/three.jpg" class="slides" id="starting-image" alt=""/></li>
<li><img src="design/images/portfolio-images/four.jpg" class="slides" alt=""/></li>
<li><img src="design/images/portfolio-images/five.jpg" class="slides" alt=""/></li>
</ul>
</div>
</section> Комментарии:
1. Я думаю, что функция setInterval является правильным способом. На YouTube есть учебник. youtube.com/watch?v=KkzVFB3Ba_o Посмотрите это, чтобы вы могли понять, как работает слайдер. Есть много способов, но этот абсолютно превосходный.
Ответ №1:
используется setInterval для бесконечного запуска вашего скрипта.. А также вы неправильно определили $img , что это должно быть $(img) . Итак, попробуйте что-то вроде:
$(document).ready(function(){
var img = $('.slides');
setInterval(function(){for(i = 0; i <= $(img).length; i ){
$(img[i]).css('opacity', 1)}
},1000);
});