我正在尝试制作轮播，但是由于某种原因，我的Java脚本无法正常工作，所以我在萤火虫中查找并且没有出现错误。
我唯一显示的图像是我的加载gif。
图像位置正确。实时示例http://codepen.io/riwakawebsitedesigns/pen/CEgdm
码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" />
<link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function Carousel() {
$(".carousel #1").show("fade", 500);
$(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".carousel img").size();
var count = 2;
setInterval(function () {
$(".carousel #"+count).show("slide",{direction: 'right', 500});
$(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1
}
}, 6500);
);}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="carousel">
<img id="1" src="images/image1.jpg" border="0" alt="" />
<img id="2" src="images/image2.jpg" border="0" alt="" />
<img id="3" src="images/image3.jpg" border="0" alt="" />
</div>
</div>
</div>
</div><!-- . Container -->
</body>
</html>
的CSS
.carousel {
width: 100%;
height: 350px;
overflow: hidden;
background-image: url('../images/loading.gif');
background-repeat: no-repeat;
background-position: center;
}
.carousel img {
width: 100%;
height: 350px;
display: none;
}
最佳答案
js代码中有错误。复制并粘贴以下代码
$(document).ready(function Carousel() {
$(".carousel #1").show("fade", 500);
$(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".carousel img").size();
var count = 2;
setInterval(function() {
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
$(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1
}
}, 6500);
})
关于javascript - 轮播图片jQuery无法正常运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26098072/