图像合并在旋转木马中。 我在HTML写的像图像合并在旋转木马中
$(function(){
$('#carousel').each(function(){
var slideTime = 200;
var delayTime = 2000;
var carouselWidth = $(this).width();
var carouselHeight = $(this).height();
$(this).append('');
$(this).children('ul').wrapAll('');
$('#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">SITEh2>
<ul class="">
<li><a class="home" href="">Homea>li>
<li><a class="profile" href="">Detaila>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％。
2 回答
在引导狂欢游行，
<div id="carousel" id="myCarousel" class="carousel slide imgArea
float-right" data-ride="carousel">
<ul class="carousel-inner">
<li class="item active">
<a href="#"><img src="photo1.jpg" alt="">a>
li>
<li class="item">
<a href="#"><img src="photo2.jpg" alt="">a>
li>
ul>
div>
你可以试试这个
我不知道，知道你为什么有这么多的代码，如果你使用的是引导你可以使用你的旋转木马，这里是一个清晰和简单的例子。
<html lang="en">
<head>
<title>Bootstrap Exampletitle>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.2.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<h2>Carousel Exampleh2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">li>
<li data-target="#myCarousel" data-slide-to="1">li>
<li data-target="#myCarousel" data-slide-to="2">li>
ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://placeimg.com/640/480/arch" alt="Arch" style="width:100%;">
div>
<div class="item">
<img src="https://placeimg.com/640/480/nature" alt="Nature" style="width:100%;">
div>
<div class="item">
<img src="https://placeimg.com/640/480/tech" alt="Tech" style="width:100%;">
div>
div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">span>
<span class="sr-only">Previousspan>
a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">span>
<span class="sr-only">Nextspan>
a>
div>
div>
body>
html>
