0
圖像合併在旋轉木馬中。 我在HTML寫的像圖像合併在旋轉木馬中
$(function(){
$('#carousel').each(function(){
var slideTime = 200;
var delayTime = 2000;
var carouselWidth = $(this).width();
var carouselHeight = $(this).height();
$(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
$(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>');
$('#carousel_wrap').css({
width: (carouselWidth),
height: (carouselHeight),
position: 'relative',
overflow: 'hidden'
});
var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width'));
var listCount = $('#carousel_move').children('ul').children('li').length;
var ulWidth = (listWidth)*(listCount);
$('#carousel_move').css({
top: '0',
left: -(ulWidth),
width: ((ulWidth)*3),
height: (carouselHeight),
position: 'absolute'
});
$('#carousel_wrap ul').css({
width: (ulWidth),
float: 'left'
});
$('#carousel_wrap ul').each(function(){
$(this).clone().prependTo('#carousel_move');
$(this).clone().appendTo('#carousel_move');
});
carouselPosition();
$('#carousel_prev').click(function(){
clearInterval(setTimer);
$('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){
carouselPosition();
});
timer();
});
$('#carousel_next').click(function(){
clearInterval(setTimer);
$('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){
carouselPosition();
});
timer();
});
function carouselPosition(){
var ulLeft = parseInt($('#carousel_move').css('left'));
var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
$('#carousel_move').css({left:-(ulWidth)});
} else if(ulLeft == 0) {
$('#carousel_move').css({left:-(ulWidth)});
};
};
timer();
function timer() {
setTimer = setInterval(function(){
$('#carousel_next').click();
},delayTime);
};
});
});* {
margin: 0;
padding: 0;
}
.menu {
background-color: gray;
width: 500px;
height: 100%;
float: left;
}
.title {
color: white;
font-size: 30px;
margin: 0px 5px;
margin-left: 40px;
text-align: center;
}
.first {
padding-top: 30px;
}
html,
body,
.menu {
height: 100%;
}
body {
margin: 0;
}
.relative {
position: relative;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
li a img {
width: 100%;
height: 100%;
}
.float-right {
width: calc(100% - 500px);
overflow: hidden;
float: right;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-container {
width: 100%;
float: left;
}
.header {
float: left;
width: 100%;
}
.imgArea {
float: left;
width: 75%;
height: 100%;
}<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="menu" id="menu">
<h2 class="title first">SITE</h2>
<ul class="">
<li><a class="home" href="">Home</a></li>
<li><a class="profile" href="">Detail</a></li>
</ul>
</div>
<div class="imgArea float-right" id="carousel">
<ul>
<li><a href="#"><img src="photo1.jpg" alt=""></a></li>
<li><a href="#"><img src="photo2.jpg" alt=""></a></li>
</ul>
</div>
<script src="carousel.js"></script>但現在當我跑我的網站，它就像 
我要讓首先顯示照片1旋轉木馬，其次照片2是顯示和下一張photo1再次顯示...。但現在首先photo1 & photo2顯示在同一時間，其次他們再次顯示在同一時間，然後他們再次......爲什麼我的代碼錯了？怎麼應該一世 解決這個問題？我想把旋轉木馬放在瀏覽器剩餘的區域，並將旋轉木馬的圖像大小調整爲100％。
你使用正確的引導你 –
可以嘗試引導轉盤 –