我从一个教程中编写了这个jquery代码。 图像滑动一次结束后停止。 我希望我的jquery滑块自动重新启动。 请帮我解决。
我仍然是一个学习者。 我看了其他jquery滑块教程。 但是我想从当前代码中解决。 请使用我提供的代码帮助我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Jquery Slider</title>
<script src="jquery.js"></script>
<style>
#container {
width: 250px;
height: 500px;
background: grey;
float: left;
margin: 10px;
}
#slider {
width: 750px;
height: 500px;
background: grey;
float: left;
margin: 10px;
}
.img {
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
.slider_img {
width: 750px;
height: 500px;
display: none;
}
.text {
display: none;
background: black;
color: white;
text-align: center;
font-size: 20px;
margin-top: -50px;
line-height: 50px;
opacity: 0.6;
}
.prev {
background: green;
float: left;
width: 80px;
margin-top: 240px;
color: white;
height: 35px;
}
.next {
float: left;
background: green;
width: 80px;
margin-top: 240px;
color: white;
height: 35px;
}
.identifier {
opacity: 0.4;
}
</style>
</head>
<body>
<div id="container">
<div class="pic">
<img src="" class="img" />
<div class="text">This is First Image</div>
</div>
<div class="pic">
<img src="" class="img" />
<div class="text">This is Second Image</div>
</div>
<div class="pic">
<img src="" class="img" />
<div class="text">This is Third Image</div>
</div>
<div class="pic">
<img src="" class="img" />
<div class="text">This is Fourth Image</div>
</div>
<div class="pic">
<img src="" class="img" />
<div class="text">This is Fifth Image</div>
</div>
<div class="pic">
<img src="" class="img" />
<div class="text">This is Sixth Image</div>
</div>
</div>
<button class="prev">Prev</button>
<div id="slider"></div>
<button class="next">Next</button>
<script>
$(document).ready(function startSlide() {
//Default Slider Image
$("#container").children().first().addClass("identifier")
.clone().appendTo("#slider").removeClass("identifier");
$("#slider").children().prev().remove();
$("#slider").children().children().first()
.attr({ class: "slider_img" }).fadeIn(500, function() {
$(this).next().fadeIn();
});
//Clicking Pic to Add to Slider
$(".pic").click(function() {
$(this).clone().appendTo("#slider");
$(this).addClass("identifier");
$("#container").children().not(this).removeClass("identifier");
$("#slider").children().prev().remove();
$("#slider").children().children().first()
.attr({ class: "slider_img" }).fadeIn(500, function() {
$(this).next().fadeIn();
});
});
//Next Button Code
$(".next").click(function() {
$(".identifier").next().clone().appendTo("#slider");
$(".identifier").removeClass("identifier")
.next().addClass("identifier");
$("#slider").children().prev().remove();
$("#slider").children().children()
.first().attr({ class: "slider_img" })
.fadeIn(500, function() {
$(this).next().fadeIn();
});
});
//Prev Button Code
$(".prev").click(function() {
$(".identifier").prev().clone().appendTo("#slider");
$(".identifier").removeClass("identifier")
.prev().addClass("identifier");
$("#slider").children().prev().remove();
$("#slider").children().children()
.first().attr({ class: "slider_img" })
.fadeIn(500, function() {
$(this).next().fadeIn();
});
});
//Automatic Slider
setInterval(function() {
$(".identifier").next().clone().appendTo("#slider");
$(".identifier").removeClass("identifier")
.next().addClass("identifier");
$("#slider").children().prev().remove();
$("#slider").children().children()
.first().attr({ class: "slider_img" })
.fadeIn(500, function() {
$(this).next().fadeIn();
});
}, 2000);
});
</script>
</body>
</html>