рони,
Посмотрел я слайды, ссылку которой вы дали - многое понял, немногое - не понял
А не понял потому, что почему-то мой "постоянно посещаемый"
сайт не работает. Не мог понять некоторые неизвестные мне функции типа "
loop". Но всё же, там ведь нет примера выборки, которая нужна мне.
И на счёт совета не использовать "
setInterval" - по-моему же, как я знаю, "
setTimeout" запускае функцию только один раз? А тут нужно, чтобы запускался бесконечно, через опр. время. Или я не прав? И, если можно, не могли бы вкратце объяснить, почему не использовать
setInterval? Он очень "тяжёлый"?
Вот мой код слайдов... Размеры задавать не нужно - каков размер изображения - таков и размер слайда. Неплохо же?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Слайд</title>
<style type="text/css">
body {
min-height: 300px;
background-color: #E4E4E4;
}
#topBlok {
width: 500px;
margin: 0 auto;
padding: 20px 0;
background-color: #FFFFFF;
}
h1 {
margin: 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.slaidlar {
margin: 0 auto;
padding: 0;
position: relative;
}
.slaidlarBlok {
position: relative;
overflow: hidden;
}
.slaidContainer {
transition: 0.5s;
}
.slaidRasemBlok {
display: inline-block;
}
.slaidRasemBlok p {
width: 100%;
height: 32px;
box-sizing: border-box;
margin: 0;
padding: 5px 10px;
position: absolute;
bottom: 2px;
font-size: 20px;
color: #FFFFFF;
background-color: rgba(20,20,20,0.7);
border-top: 1px solid #000000;
}
.kuchuUn, .kuchuSul {
position: absolute;
top: calc(50% - 21px);
}
.kuchuUn:hover, .kuchuSul:hover {
cursor: pointer;
}
.kuchuUn {
right: -24px;
}
.kuchuSul {
left: -24px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var slRasBlok = $(".slaidRasemBlok");
var slRasBlokWidth = slRasBlok.width();
var transPoz = 0;
$(".slaidlar").width(slRasBlokWidth);
$(".slaidRasemBlok p").width(slRasBlokWidth);
$(".slaidContainer").width(slRasBlok.length * slRasBlokWidth);
function slaidPoz1(poz1){
$(this).prevAll(".slaidlarBlok").find(".slaidContainer").css("transform", "translateX("+poz1+"px)");
}
function slaidPoz(transPoz){
return function(){
var transBlok = $(".slaidContainer");
if(transPoz <= -(slRasBlok.length * slRasBlokWidth - slRasBlokWidth)){
transPoz = 0;
transBlok.css("transform", "translateX("+transPoz+"px)");
}else{
transPoz = transPoz - slRasBlokWidth;
transBlok.css("transform", "translateX("+transPoz+"px)");
}
}
}
setInterval(slaidPoz(transPoz), 6000);
//$(".kuchuUn").click(slaidPoz(transPoz));
$(".kuchuUn").click(function(){
if(transPoz <= -(slRasBlok.length * slRasBlokWidth - slRasBlokWidth)){
transPoz = 0;
slaidPoz1.bind(this)(transPoz);
}else{
transPoz = transPoz - slRasBlokWidth;
slaidPoz1.bind(this)(transPoz);
}
});
$(".slaidContainer").click(function(){
if(transPoz <= -(slRasBlok.length * slRasBlokWidth - slRasBlokWidth)){
transPoz = 0;
$(this).css("transform", "translateX("+transPoz+"px)");
}else{
transPoz = transPoz - slRasBlokWidth;
$(this).css("transform", "translateX("+transPoz+"px)");
}
});
$(".kuchuSul").click(function(){
if(transPoz >= 0){
transPoz = -(slRasBlok.length * slRasBlokWidth - slRasBlokWidth);
slaidPoz1.bind(this)(transPoz);
}else{
transPoz = transPoz + slRasBlokWidth;
slaidPoz1.bind(this)(transPoz);
}
});
});
</script>
</head>
<body>
<div id="topBlok">
<h1>Слайды</h1>
<div class="slaidlar">
<div class="slaidlarBlok">
<div class="slaidContainer"><div class="slaidRasemBlok"><img src="img/slaidlar/1.jpg" style="background-color: #FF0000;" width="500" height="200"><p>Слайд 1</p></div><div class="slaidRasemBlok"><img src="img/slaidlar/2.jpg" style="background-color: #00FF00;" width="500" height="200"><p>Слайд 2</p></div><div class="slaidRasemBlok"><img src="img/slaidlar/3.jpg" style="background-color: #0000FF;" width="500" height="200"><p>Слайд 3</p></div></div>
</div>
<img class="kuchuUn" src="img/arrow-next.png" width="24" height="43">
<img class="kuchuSul" src="img/arrow-prev.png" width="24" height="43">
</div>
</div>
</body>
</html>