图像合并在旋转木马中

$(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>