Question

我已经修改了大约6张css定价卡/表，这些表是正常排列的，而不是在第一行已满后下到第一行的表格，我希望它在旋转木马内，向左或向右滚动即使在到达终点之后，也应该从...开始重新开始

目前我所拥有的

html（我的html中只有3张卡，因为我不想让代码变得笨重，尽管它的意思是6）

  <div class="columns item" >
    <a href="#" style="text-decoration: none;">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" style=" width: 100%; height: 100%;">

    </div>
    <div class="item-content">
        <div class="price average-color" style="background-color: rgb(157, 149, 149);"><span>₦60 MILLION</span></div>
        <header style="padding:30px; background-color: gray;color: white;">
            <h2 style="font-size: 18px; font-weight: 500;">4 Bedroom Terrace Houses</h2>
            <h3 style="font-size: 14px;opacity: 0.6"><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
                                        <dt>Bathrooms</dt>
                                        <dd>1</dd>
                                        <dt>Bedrooms</dt>
                                        <dd>4</dd>
                                        <dt>Area</dt>
                                        <dd>165m<sup>2</sup></dd>
                                        <dt>Garages</dt>
                                        <dd>1</dd>
                                    </dl>
        </footer>
    </div>
  </ul>
    </a>
</div> 

<div class="columns item">
    <a href="#" style="text-decoration: none;">
  <ul class="house">
    <div class="header"><img src="img/houses/2.jpg" style=" width: 100%; height: 100%;"></div>
    <div class="item-content">
        <div class="price average-color" style="background-color: rgb(157, 149, 149);"><span>₦75 MILLION</span></div>
        <header style="padding:30px; background-color: gray;color: white;">
            <h2 style="font-size: 18px; font-weight: 500">4 Bedroom Terrace</h2>
            <h3 style="font-size: 14px;opacity: 0.6"><i class="fa fa-map-marker "></i>  Ikate Lekki</h3>
        </header>
        <footer>
            <dl>
                                        <dt>Bathrooms</dt>
                                        <dd>1</dd>
                                        <dt>Bedrooms</dt>
                                        <dd>4</dd>
                                        <dt>Area</dt>
                                        <dd>165m<sup>2</sup></dd>
                                        <dt>Garages</dt>
                                        <dd>3</dd>
                                    </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#" style="text-decoration: none;">
  <ul class="house">
    <div class="header"><img src="img/houses/3.jpg" style=" width: 100%; height: 100%;"></div>
    <div class="item-content">
        <div class="price average-color" style="background-color: rgb(157, 149, 149);"><span>₦100 MILLION</span></div>
        <header style="padding:30px; background-color: gray;color: white;">
            <h2 style="font-size: 18px; font-weight: 500">5 Bedroom Detached House</h2>
            <h3 style="font-size: 14px;opacity: 0.6"><i class="fa fa-map-marker "></i> Lekki County Home </h3>
        </header>
        <footer>
            <dl>
                                        <dt>Bathrooms</dt>
                                        <dd>1</dd>
                                        <dt>Bedrooms</dt>
                                        <dd>5</dd>
                                        <dt>Area</dt>
                                        <dd>165m<sup>2</sup></dd>
                                        <dt>Garages</dt>
                                        <dd>1</dd>
                                    </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>
   </div>

和css

   * {
        box-sizing: border-box;
            }          

.columns {
    float: left;
    width: 25%;
    padding: 8px;
}

.house {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: white;
}

.house:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.house .header {

    color: white;

}

.house li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.house .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

.item dl {
     color: #919191; 
     font-size: 12px; 
     padding: 30px; 
}

dl {
     margin-bottom: 0; 
}

dl {
     margin-top: 0; 
     margin-bottom: 20px; 
}

.item dl dd {
   text-align: right; 
     margin-bottom: 10px; 
}

dl dd {
     text-align: right; 
    margin-bottom: 10px; 
}

dd {
    margin-left: 0;
}

.item dl dt {
     float: left; 
    font-weight: normal;
}

dl dt {
     float: left; 
}
.price {
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);

    background-color: #626262;
    color: #fff;
    padding: 6px 12px;
    position: relative;
    right: 0px;
    z-index: 1;
}

.price:after {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
    background-color: #000;
    content: "";
    height: 100%;
    left: 0;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.price span {
    position: relative;
    z-index: 2;
}
.average-color {
    -moz-transition: 0.4s;
     -webkit-transition: 0.4s; 
    transition: 0.4s; 
}

Answer 1

如果没有javascript，你无法解决问题。所以我为你创建了一个小脚本：jsfiddle.net （我使用jQuery）。但是如果你想制作一个更好用户友好的旋转木马，你应该添加事件和按钮。

<强> HTML：

<body>

<div id="container"> <!-- contains the items -->

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

<div class="columns item" >
    <a href="#">
  <ul class="house">
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px">
    </div>
    <div class="item-content">
        <div class="price average-color"><span>₦60 MILLION</span></div>
        <header>
            <h2>4 Bedroom Terrace Houses</h2>
            <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3>
        </header>
        <footer>
            <dl>
               <dt>Bathrooms</dt>
               <dd>1</dd>
               <dt>Bedrooms</dt>
               <dd>4</dd>
               <dt>Area</dt>
               <dd>165m<sup>2</sup></dd>
               <dt>Garages</dt>
               <dd>1</dd>
               </dl>
        </footer>
    </div>
  </ul>
    </a>
</div>

</div>
</body>

<强> CSS：

* {box-sizing: border-box;}
/* class house */
.house {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: #fff;
}
.house:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}
.house {color: #fff;}
.house footer {color: #000;}
.house li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}
header {padding:30px; background-color: gray;color: white;}
h2 {font-size: 18px; font-weight: 500;}
h3 {font-size: 14px;opacity: 0.6}
a {text-decoration: none;}
img {display: block; height: 150px;}
.price {background-color: rgb(157, 149, 149);}

/* NEW or EDITED */

#container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* no wrap */
}
.columns {
    display: inline-block; /* arrange colums next to each other */
    width: 25%;
    padding: 8px;
    white-space: normal;
}

<强> JS：

(function (window, document, $, undefined) {
    $(function() {
    function slide() {
        $(".item").first().animate({        // animate margin of first item
            marginLeft: "-25%"             // 25% is the width of one item
        }, 4000, "linear", function() {    // callback
            $("#container").append(this);  // change order
          $(this).css("margin-left", 0);   // set margin to 0
          slide();                         // loop
        });
        }
    slide();                               // invocation
  });
})(window, document, jQuery);

如何将css卡（例如定价卡）添加到旋转木马中

1 个答案: