Как я могу сделать это автоматически?

Я новичок в JQuery, и почти 80% этого не является моим кодом. Я просто использую его, чтобы узнать, как создавать слайдеры, но я был бы очень признателен, если бы кто-то помог мне, сказав мне, что я могу сделать для сделайте этот слайдер автоматически включенным в момент загрузки страницы. Кроме того, в качестве дополнительного можно сделать это, когда slide_index == 16 слайд будет вращаться нормально, а не вращаться назад до первого изображения. Спасибо: PКак я могу сделать это автоматически?

HTML:

<html> 
<body> 
<div class="slider"> 
<ul> 
    <li> 
     <img src="img1.jpg" /> 
    </li> 
    <li> 
     <img src="img2.jpg" /> 
    </li> 
    <li> 
     <img src="img3.jpg" /> 
    </li> 
    <li> 
     <img src="img4.jpg" /> 
    </li> 
    <li> 
     <img src="img5.jpg" /> 
    </li> 
    <li> 
     <img src="img6.jpg" /> 
    </li> 
    <li> 
     <img src="img7.jpg" /> 
    </li> 
    <li> 
     <img src="img8.jpg" /> 
    </li> 
    <li> 
     <img src="img9.jpg" /> 
    </li> 
    <li> 
     <img src="img10.jpg" /> 
    </li> 
    <li> 
     <img src="img11.jpg" /> 
    </li> 
    <li> 
     <img src="img12.jpg" /> 
    </li> 
    <li> 
     <img src="img13.jpg" /> 
    </li> 
    <li> 
     <img src="img14.jpg" /> 
    </li> 
    <li> 
     <img src="img15.jpeg" /> 
    </li> 
    <li> 
     <img src="img16.jpg" /> 
    </li> 
    <li> 
     <img src="img17.jpg" /> 
    </li> 
</ul> 
<button class="prev">Prev</button> 
<button class="next">Next</button> 
</div> 
</div> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="slider.js"></script> 
</body> 
</html>

CSS:

.slider { 
width: 60%; 
overflow: hidden; 
height: 607px; 
position: relative; 
border: 5px #000000 solid; 
margin-left: 20%; 
} 

.slider ul { 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
width: 1700%; 
height: 100%; 
top: 0; 
} 

.slider li { 
padding: 0; 
margin: 0; 
width: 33.333333%; 
height: 100%; 
overflow: hidden; 
position: absolute; 
top: 0; 
bottom: 0; 
} 

.slider li img { 
border: none; 
width: 100%; 
min-height: 100%; 
} 
.slider button { 
position: absolute; 
display: block; 
box-sizing: border-box; 
border: none; 
outline: none; 
top: 0; 
bottom: 0; 
width: 13%; 
background-color: rgba(0, 0, 0, 0.3); 
color: #fff; 
margin: 0; 
padding: 0; 
text-align:center; 
opacity: 0; 
z-index: 2; 
height: 100%; 
} 

.slider button.prev { 
left: 0; 
font-size: 30px; 
} 

.slider button.next { 
right: 0; 
font-size: 30px; 
} 

.slider button:hover, .slider button:active { 
opacity: 1.0;

}

JQuery:

$(function() { 

var ul = $(".slider ul"); 
var slide_count = ul.children().length; 
var slide_width_pc = 100.0/slide_count; 
var slide_index = 0; 

ul.find("li").each(function(indx) { 
var left_percent = (slide_width_pc * indx) + "%"; 
$(this).css({"left":left_percent}); 
$(this).css({width:(100/slide_count) + "%"}); 
}); 

setInterval(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    } 

    function() { 
    slide(slide_index + 1); 
    if (slide_index == 16) { 
     slide(slide_index == 0); 
     ul.animate({ 
     "margin-left": margin_left_pc; 
     }, 400); 
    } 
    },500); 

function slide(new_slide_index) { 

if(new_slide_index < 0 || new_slide_index >= slide_count) return; 

var margin_left_pc = (new_slide_index * (-100)) + "%"; 

ul.animate({"margin-left": margin_left_pc}, 400, function() { 

slide_index = new_slide_index 

}); 
} 
});

источник

2016-09-17 Sonnie Thomas

слайдов с фиксированной шириной? – Ivan

У меня нет подсказки, как изменить этот материал. Я новичок в JQuery, не стесняйтесь комментировать какой-то лучший код, чтобы сделать автоматический слайдер изображения: P Я бы очень признателен, что не могу найти много помощи по этой теме, просто используя сайты. –

Основная идея: изменить «левую» позицию ul (index * liWidth) внутри setInterval, когда index == 16 сделать это 0 – Ivan

Посмотрите на fiddle

Используйте setInterval, чтобы начать скольжение, и clearInterval + setInterval для сброса таймера после щелчка

источник

2016-09-19 18:40:19 Ivan

К вашему первому вопросу: из того, что я понимаю, вы хотите, чтобы ваш слайдер скользил автоматически, даже когда кнопка не нажата. Для этого вы должны создать интервал:

var sliderInterval = setInterval(function() { moveRight(); }, 3000);

3000 равно 3 секунды здесь, не стесняйтесь настроить его.

источник

2016-09-17 15:42:49 BlueBockser

Спасибо за ваше время, но я отправил неправильный бит кода, я больше не использую этот. Но спасибо :) –

Ну, вы можете по существу сохранить строку кода. Вы должны только обменивать 'moveRight();' на то, что вы делаете, когда нажата кнопка «.next». – BlueBockser

Изменение:

$(".slider .prev").click(function() { 
console.log("prev button clicked"); 
slide(slide_index - 1); 
}); 

$(".slider .next").click(function() { 
slide(slide_index + 1); 
if (slide_index == 16){ 
slide(slide_index == 0); 
ul.animate({"margin-left": margin_left_pc}, 400); 
} 
});

To:

setInterval(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    } 

    function() { 
    slide(slide_index + 1); 
    if (slide_index == 16) { 
     slide(slide_index == 0); 
     ul.animate({ 
     "margin-left": margin_left_pc 
     }, 400); 
    } 
    },500);

Что я сделал вместо того, чтобы функции запуска, когда слайд щелкнуло, я сделал это, где он работает функцию каждые полсекунды. Чтобы изменить количество времени перед каждым изменением слайда, вам нужно изменить число, на котором говорят 500 на конце между двумя типами скобок. Надеюсь, это помогло.

источник

2016-09-17 16:30:58 Joshua

Эй, спасибо за ваше время и помощь! Однако, похоже, он не работает. Должен ли я публиковать весь свой код (HTML, CSS и JQuery)? –

Да, это было бы полезно, если бы вы могли разместить свой html тоже. Вы можете редактировать его в исходное сообщение. – Joshua

Выполнено. Кстати, я очень ценю ваше время и помощь :) –

Как я могу сделать это автоматически?

ответ

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