0
私は再生/一時停止ボタンをクリックしたときに開始することができない、単純なjqueryスライダをコーディングしています。スライダが、それを動作させることはできません、コードはかなりシンプルですが、私はjsの初心者のビットです。一時停止/再生がクリックされたときにJqueryスライダが停止しない
swapslides関数は、コードが壊れている状態チェッカーのジョブを行います。
あなたがここにコードを見てとることができます。
<script>
$(document).ready(function(){
var stop = true;
$('.play').click(function(){
\t \t if (stop == true) {
stop = false;
\t \t alert(stop);
}
else {
stop = true;
\t \t alert(stop);
}
});
\t
\t if(stop == false){
\t setInterval(swapSlides, 3000);
\t }
\t
\t
function swapSlides(){
\t var cs = $('div.currentslide:first');
\t var ns = cs.next();
\t if(ns.hasClass('mySlides1')){
\t cs.removeClass('currentslide');
\t ns.addClass('currentslide');
}
\t else{
\t ns = $('#polaroid1').children('div.mySlides1:first');
\t cs.removeClass('currentslide');
\t ns.addClass('currentslide');
\t }
\t }
\t
});
</script>.play{
\t position:absolute;
\t left:5px;
\t bottom:5px;
\t cursor:pointer;
\t z-index:10000;
}
.polaroid1{
\t box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5);
\t -webkit-backface-visibility: hidden;
\t transform: rotate(-8deg);
\t margin-bottom:30px;
\t width:380px;
\t height:320px;
\t background-color:rgba(255, 255, 255, 1.0);
\t text-align:right;
\t padding-top:10px;
\t padding-right:10px;
\t padding-left:10px;
\t padding-bottom:15px;
\t top:15px;
\t left:25px;
\t position:relative;
}
.photo1{
\t width:100%;
\t height:85%;
\t position:relative;
\t padding:5px;
}
.date1{
\t margin:0;
\t padding-right:10px;
\t font-family: 'Covered By Your Grace', cursive;
\t transform: rotate(-5deg);
\t font-size:28px;
}
.mySlides1{
\t display:none;
\t width:380px;
\t height:320px;
\t position:absolute;
\t top:0px;
\t left:0px;
}
.currentslide{display:block;}<div id="polaroid1" class="polaroid1">
<img class="play" src="images/heart.png">
<div class="mySlides1 fade currentslide">
<img class="photo1" src="images/IMG-20170610-WA0028.jpg">
<h3 class="date1">22-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170812_181516.jpg">
<h3 class="date1">12-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170522_112958.jpg">
<h3 class="date1">22-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/IMG-20170610-WA0017.jpg">
<h3 class="date1">10-06-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170819_194526.jpg">
<h3 class="date1">19-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170811_182103.jpg">
<h3 class="date1">11-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170522_124602.jpg">
<h3 class="date1">22-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170419_020725.jpg">
<h3 class="date1">19-04-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170520_115819.jpg">
<h3 class="date1">20-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170822_011703.jpg">
<h3 class="date1">22-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170705_184344.jpg">
<h3 class="date1">05-07-2017</h3>
</div>
</div>