我尝试在两列中进行图像幻灯片放映，但我希望第一列中的图像将在2秒后更改，并且第二列中的此图像将在4秒后更改。我尝试了一种解决方案（参见下面的代码），但由于第一列中的图像没有变化，但第二列中的图像正在发生变化，因此无法正常工作。
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("home-image-left");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("home-image-right");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 4 seconds
}
</script>.home-image-left {
display: none;
padding-left: 20px;
width: 546px;
height: 749px;
}
.home-image-right {
padding-right: 13px;
display: none;
width: 546px;
height: 749px;
}
Here <div class="container">
<div class="row">
<div class="col-sm-6">
<img class="home-image-left" src="gfx/home-image-left.jpg">
<img class="home-image-left" src="gfx/home-image-left-2.jpg">
<img class="home-image-left" src="gfx/home-image-left-3.jpg">
</div>
<div class="col-sm-6">
<img class="home-image-right" src="gfx/home-image-right.jpg">
<img class="home-image-right" src="gfx/home-image-right-2.jpg">
<img class="home-image-right" src="gfx/home-image-right-3.jpg">
</div>
</div>
</div>
答案 0 :(得分：0)
这里我没有使用任何Jquery，请查看附件DEMO
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-6 col-xs-6">
<div id="carousel-example-generic" class="carousel slide" data-interval="2000" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.mixologyeventstyling.com/files/resized/458397/cropped/1140;550;3634fe4ba4fb02c728ce6d34abfe58e12e5805d8.jpg" alt="1">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="2">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="http://feelgrafix.com/data/images/images-1.jpg" alt="3">
<div class="carousel-caption">
3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div id="carousel-example-generic" class="carousel slide" data-interval="4000" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.mixologyeventstyling.com/files/resized/458397/cropped/1140;550;3634fe4ba4fb02c728ce6d34abfe58e12e5805d8.jpg" alt="1">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="2">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="http://feelgrafix.com/data/images/images-1.jpg" alt="3">
<div class="carousel-caption">
3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
答案 1 :(得分：0)
您需要更新您的javascript代码，使其适用于以下幻灯片演示..
var myIndex = 1;
carousel1();
function carousel1() {
var i;
var x = document.getElementsByClassName("home-image-left");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
window.myIndex++;
if (window.myIndex > x.length){
window.myIndex = 1;
}
var newindex = parseInt(window.myIndex-1);
Object.keys(x).forEach(function (key) {
if(key == newindex) {
x[key].style.display = "block";
}
});
setTimeout(carousel1, 2000); // Change image every 2 seconds
}
var secondIndex = 0;
carousel2();
function carousel2() {
var i;
var x = document.getElementsByClassName("home-image-right");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
window.secondIndex++;
if (window.secondIndex > x.length) {window.secondIndex = 1}
var newindex = parseInt(window.secondIndex-1);
Object.keys(x).forEach(function (key) {
if(key == newindex) {
x[key].style.display = "block";
}
});
setTimeout(carousel2, 4000); // Change image every 4 seconds
}