0
我正在一個項目上工作，我得到了一個我應該將塊之間的差距縮小到3px的部分。過去兩天我盡力而爲，但無法獲得所需的顯示效果。減少CSS中兩個塊之間的差距
這什麼都做了截屏： Screen Capture of the page
我不是能當我貼我的代碼在這個職位，所以我只是給了所需的代碼，爲您提供給我你的幫助，段運行。
(function($) {
\t var \t aux \t \t = {
\t \t \t // navigates left/right
\t \t \t navigate \t : function(dir, $el, $wrapper, opts, cache) {
\t \t \t \t
\t \t \t \t var scroll \t \t = opts.scroll,
\t \t \t \t \t factor \t \t = 1,
\t \t \t \t \t idxClicked \t = 0;
\t \t \t \t \t
\t \t \t \t if(cache.expanded) {
\t \t \t \t \t scroll \t \t = 1; // scroll is always 1 in full mode
\t \t \t \t \t factor \t \t = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item \t
\t \t \t \t \t idxClicked \t = cache.idxClicked; // the index of the clicked item
\t \t \t \t }
\t \t \t \t
\t \t \t \t // clone the elements on the right/left and append/prepend them according to dir and scroll
\t \t \t \t if(dir === 1) {
\t \t \t \t \t $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
\t \t \t \t \t \t $(this).clone(true).css('left', (cache.totalItems - idxClicked + i) * cache.itemW * factor + 'px').appendTo($wrapper);
\t \t \t \t \t });
\t \t \t \t }
\t \t \t \t else {
\t \t \t \t \t var $first \t = $wrapper.children().eq(0);
\t \t \t \t \t
\t \t \t \t \t $wrapper.find('div.ca-item:gt(' + (cache.totalItems - 1 - scroll) + ')').each(function(i) {
\t \t \t \t \t \t // insert before $first so they stay in the right order
\t \t \t \t \t \t $(this).clone(true).css('left', - (scroll - i + idxClicked) * cache.itemW * factor + 'px').insertBefore($first);
\t \t \t \t \t });
\t \t \t \t }
\t \t \t \t
\t \t \t \t // animate the left of each item
\t \t \t \t // the calculations are dependent on dir and on the cache.expanded value
\t \t \t \t $wrapper.find('div.ca-item').each(function(i) {
\t \t \t \t \t var $item \t = $(this);
\t \t \t \t \t $item.stop().animate({
\t \t \t \t \t \t left \t : (dir === 1) ? '-=' + (cache.itemW * factor * scroll) + 'px' : '+=' + (cache.itemW * factor * scroll) + 'px'
\t \t \t \t \t }, opts.sliderSpeed, opts.sliderEasing, function() {
\t \t \t \t \t \t if((dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor) || (dir === -1 && $item.position().left > ((cache.totalItems - 1 - idxClicked) * cache.itemW * factor))) {
\t \t \t \t \t \t \t // remove the item that was cloned
\t \t \t \t \t \t \t $item.remove();
\t \t \t \t \t \t } \t \t \t \t \t \t
\t \t \t \t \t \t cache.isAnimating \t = false;
\t \t \t \t \t });
\t \t \t \t });
\t \t \t \t
\t \t \t },
\t \t \t // opens an item (animation) -> opens all the others
\t \t \t openItem \t : function($wrapper, $item, opts, cache) {
\t \t \t \t cache.idxClicked \t = $item.index();
\t \t \t \t // the item's position (1, 2, or 3) on the viewport (the visible items)
\t \t \t \t cache.winpos \t \t = aux.getWinPos($item.position().left, cache);
\t \t \t \t $wrapper.find('div.ca-item').not($item).hide();
\t \t \t \t $item.find('div.ca-content-wrapper').css('left', cache.itemW + 'px').stop().animate({
\t \t \t \t \t width \t : cache.itemW * 2 + 'px',
\t \t \t \t \t left \t : cache.itemW + 'px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing)
\t \t \t \t .end()
\t \t \t \t .stop()
\t \t \t \t .animate({
\t \t \t \t \t left \t : '0px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing, function() {
\t \t \t \t \t cache.isAnimating \t = false;
\t \t \t \t \t cache.expanded \t \t = true;
\t \t \t \t \t
\t \t \t \t \t aux.openItems($wrapper, $item, opts, cache);
\t \t \t \t });
\t \t \t \t \t \t
\t \t \t },
\t \t \t // opens all the items
\t \t \t openItems \t : function($wrapper, $openedItem, opts, cache) {
\t \t \t \t var openedIdx \t = $openedItem.index();
\t \t \t \t
\t \t \t \t $wrapper.find('div.ca-item').each(function(i) {
\t \t \t \t \t var $item \t = $(this),
\t \t \t \t \t \t idx \t \t = $item.index();
\t \t \t \t \t
\t \t \t \t \t if(idx !== openedIdx) {
\t \t \t \t \t \t $item.css('left', - (openedIdx - idx) * (cache.itemW * 3) + 'px').show().find('div.ca-content-wrapper').css({
\t \t \t \t \t \t \t left \t : cache.itemW + 'px',
\t \t \t \t \t \t \t width \t : cache.itemW * 2 + 'px'
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // hide more link
\t \t \t \t \t \t aux.toggleMore($item, false);
\t \t \t \t \t }
\t \t \t \t });
\t \t \t },
\t \t \t // show/hide the item's more button
\t \t \t toggleMore \t : function($item, show) {
\t \t \t \t (show) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide(); \t
\t \t \t },
\t \t \t // close all the items
\t \t \t // the current one is animated
\t \t \t closeItems \t : function($wrapper, $openedItem, opts, cache) {
\t \t \t \t var openedIdx \t = $openedItem.index();
\t \t \t \t
\t \t \t \t $openedItem.find('div.ca-content-wrapper').stop().animate({
\t \t \t \t \t width \t : '0px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing)
\t \t \t \t .end()
\t \t \t \t .stop()
\t \t \t \t .animate({
\t \t \t \t \t left \t : cache.itemW * (cache.winpos - 1) + 'px'
\t \t \t \t }, opts.itemSpeed, opts.itemEasing, function() {
\t \t \t \t \t cache.isAnimating \t = false;
\t \t \t \t \t cache.expanded \t \t = false;
\t \t \t \t });
\t \t \t \t
\t \t \t \t // show more link
\t \t \t \t aux.toggleMore($openedItem, true);
\t \t \t \t
\t \t \t \t $wrapper.find('div.ca-item').each(function(i) {
\t \t \t \t \t var $item \t = $(this),
\t \t \t \t \t \t idx \t \t = $item.index();
\t \t \t \t \t
\t \t \t \t \t if(idx !== openedIdx) {
\t \t \t \t \t \t $item.find('div.ca-content-wrapper').css({
\t \t \t \t \t \t \t width \t : '0px'
\t \t \t \t \t \t })
\t \t \t \t \t \t .end()
\t \t \t \t \t \t .css('left', ((cache.winpos - 1) - (openedIdx - idx)) * cache.itemW + 'px')
\t \t \t \t \t \t .show();
\t \t \t \t \t \t
\t \t \t \t \t \t // show more link
\t \t \t \t \t \t aux.toggleMore($item, true);
\t \t \t \t \t }
\t \t \t \t });
\t \t \t },
\t \t \t // gets the item's position (1, 2, or 3) on the viewport (the visible items)
\t \t \t // val is the left of the item
\t \t \t getWinPos \t : function(val, cache) {
\t \t \t \t switch(val) {
\t \t \t \t \t case 0 \t \t \t \t \t : return 1; break;
\t \t \t \t \t case cache.itemW \t \t : return 2; break;
\t \t \t \t \t case cache.itemW * 2 \t : return 3; break;
\t \t \t \t }
\t \t \t }
\t \t },
\t \t methods = {
\t \t \t init \t \t : function(options) {
\t \t \t \t
\t \t \t \t if(this.length) {
\t \t \t \t \t
\t \t \t \t \t var settings = {
\t \t \t \t \t \t sliderSpeed \t \t : 500, \t \t \t // speed for the sliding animation
\t \t \t \t \t \t sliderEasing \t : 'easeOutExpo',// easing for the sliding animation
\t \t \t \t \t \t itemSpeed \t \t : 500, \t \t \t // speed for the item animation (open/close)
\t \t \t \t \t \t itemEasing \t \t : 'easeOutExpo',// easing for the item animation (open/close)
\t \t \t \t \t \t scroll \t \t \t : 1 \t \t \t \t // number of items to scroll at a time
\t \t \t \t \t };
\t \t \t \t \t
\t \t \t \t \t return this.each(function() {
\t \t \t \t \t \t
\t \t \t \t \t \t // if options exist, lets merge them with our default settings
\t \t \t \t \t \t if (options) {
\t \t \t \t \t \t \t $.extend(settings, options);
\t \t \t \t \t \t }
\t \t \t \t \t \t
\t \t \t \t \t \t var $el \t \t \t = $(this),
\t \t \t \t \t \t \t $wrapper \t \t = $el.find('div.ca-wrapper'),
\t \t \t \t \t \t \t $items \t \t \t = $wrapper.children('div.ca-item'),
\t \t \t \t \t \t \t cache \t \t \t = {};
\t \t \t \t \t \t
\t \t \t \t \t \t // save the with of one item \t
\t \t \t \t \t \t cache.itemW \t \t \t = $items.width();
\t \t \t \t \t \t // save the number of total items
\t \t \t \t \t \t cache.totalItems \t = $items.length;
\t \t \t \t \t \t
\t \t \t \t \t \t // add navigation buttons
\t \t \t \t \t \t if(cache.totalItems > 3) \t
\t \t \t \t \t \t \t $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>') \t
\t \t \t \t \t \t
\t \t \t \t \t \t // control the scroll value
\t \t \t \t \t \t if(settings.scroll < 1)
\t \t \t \t \t \t \t settings.scroll = 1;
\t \t \t \t \t \t else if(settings.scroll > 3)
\t \t \t \t \t \t \t settings.scroll = 3; \t
\t \t \t \t \t \t
\t \t \t \t \t \t var $navPrev \t \t = $el.find('span.ca-nav-prev'),
\t \t \t \t \t \t \t $navNext \t \t = $el.find('span.ca-nav-next');
\t \t \t \t \t \t
\t \t \t \t \t \t // hide the items except the first 3
\t \t \t \t \t \t $wrapper.css('overflow', 'hidden');
\t \t \t \t \t \t
\t \t \t \t \t \t // the items will have position absolute
\t \t \t \t \t \t // calculate the left of each item
\t \t \t \t \t \t $items.each(function(i) {
\t \t \t \t \t \t \t $(this).css({
\t \t \t \t \t \t \t \t position \t : 'absolute',
\t \t \t \t \t \t \t \t left \t \t : i * cache.itemW + 'px'
\t \t \t \t \t \t \t });
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // click to open the item(s)
\t \t \t \t \t \t $el.find('a.ca-more').live('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t $(this).hide();
\t \t \t \t \t \t \t var $item \t = $(this).closest('div.ca-item');
\t \t \t \t \t \t \t aux.openItem($wrapper, $item, settings, cache);
\t \t \t \t \t \t \t return false;
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // click to close the item(s)
\t \t \t \t \t \t $el.find('a.ca-close').live('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t var $item \t = $(this).closest('div.ca-item');
\t \t \t \t \t \t \t aux.closeItems($wrapper, $item, settings, cache);
\t \t \t \t \t \t \t return false;
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // navigate left
\t \t \t \t \t \t $navPrev.bind('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t aux.navigate(-1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // navigate right
\t \t \t \t \t \t $navNext.bind('click.contentcarousel', function(event) {
\t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t aux.navigate(1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t \t // adds events to the mouse
\t \t \t \t \t \t $el.bind('mousewheel.contentcarousel', function(e, delta) {
\t \t \t \t \t \t \t if(delta > 0) {
\t \t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t \t aux.navigate(-1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t \t } \t
\t \t \t \t \t \t \t else {
\t \t \t \t \t \t \t \t if(cache.isAnimating) return false;
\t \t \t \t \t \t \t \t cache.isAnimating \t = true;
\t \t \t \t \t \t \t \t aux.navigate(1, $el, $wrapper, settings, cache);
\t \t \t \t \t \t \t } \t
\t \t \t \t \t \t \t return false;
\t \t \t \t \t \t });
\t \t \t \t \t \t
\t \t \t \t \t });
\t \t \t \t }
\t \t \t }
\t \t };
\t
\t $.fn.contentcarousel = function(method) {
\t \t if (methods[method]) {
\t \t \t return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
\t \t } else if (typeof method === 'object' || ! method) {
\t \t \t return methods.init.apply(this, arguments);
\t \t } else {
\t \t \t $.error('Method ' + method + ' does not exist on jQuery.contentcarousel');
\t \t }
\t };
\t
})(jQuery);/* Circular Content Carousel Style */
/*Three points are very important when we want the image to fit the space required: by default: .ca-container{width:1205px;}, .ca-item{width:410px;}, .ca-item-main{width:380px;} */
.ca-container{
\t position:relative;
\t margin:25px auto 20px auto;
\t width:1205px;
\t height:650px;
}
.ca-wrapper{
\t width:100%;
\t height:100%;
\t position:relative;
}
.ca-item{
\t position:relative;
\t float:left;
\t width:410px;
\t height:100%;
\t text-align:center;
}
.ca-item-main{
\t position:absolute;
\t width: 380px;
\t top:5px;
\t left:5px;
\t right:5px;
\t bottom:5px;
\t background:#fff;
\t overflow:hidden;
\t -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
\t -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
\t box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
\t width:25px;
\t height:38px;
\t background:transparent url(../images/arrows.png) no-repeat top left;
\t position:absolute;
\t top:50%;
\t margin-top:-19px;
\t left:-40px;
\t text-indent:-9000px;
\t opacity:0.7;
\t cursor:pointer;
\t z-index:100;
}
.ca-nav span.ca-nav-next{
\t background-position:top right;
\t left:auto;
\t right:-40px;
}
.ca-nav span:hover{
\t opacity:1.0;
}
/*Text over image*/
h2.header {
bottom: 0;
position: absolute;
text-align: center;
\t margin: 0;
width: 100%;
background-color: rgba(0,0,0,0.7);
\t padding: 35px 0px 35px 0px;
\t font-family: FeaturedItem;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper img {
display: block;
max-width:100%;
}
.wrapper .overlay {
position: absolute;
top:0;
left:0;
width:380px;
height:100%;
color:white;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Circular Content Carousel with jQuery</title>
\t \t <meta charset="UTF-8" />
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
\t \t <div class="container">
\t \t \t <div id="ca-container" class="ca-container">
\t \t \t \t <div class="ca-wrapper">
\t \t \t \t \t <div class="ca-item ca-item-1">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-2">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-3">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/6.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-4">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-5">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-6">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/6.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-7">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="ca-item ca-item-8">
\t \t \t \t \t \t <div class="ca-item-main">
\t \t \t \t \t \t \t <div class="wrapper">
\t \t \t \t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
\t \t <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
\t \t <!-- the jScrollPane script -->
\t \t <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
\t \t <script type="text/javascript">
\t \t \t $('#ca-container').contentcarousel();
\t \t </script>
</body>
</html>如果有人需要運行本地代碼，然後一個.zip文件是在這裏：https://www.dropbox.com/s/x0pgyk8mbplgih0/carousel.zip?dl=0
請讓我知道如何解決這個問題。提前致謝。
請花一分鐘，看看這裏的人提問。他們發佈CODE。請張貼一些相關的代碼。 –
在問一個新問題之前，請確保你閱讀了[help]和[ask] –
好的謝謝。 Im新的，我想我需要去看看帖子是怎麼樣 –