需要幫助來創建帶有css div ul li list的html頁面以使其旋轉

Question

我正在發布測試頁的html內容，我希望將其設計為類似於在不同網站上看到的很少的網頁。 我想用ul li列表創建div以使其旋轉，一次只應顯示三個div，其余的將被隱藏。 僅當我單擊向左或向右旋轉鏈接時，隱藏的div才應可見

例如...

該網站上的新產品列表。 www.mysmarttrip.in/index.php

該網站上的精選交易清單。 www.freekaamaal.com

我做了很多嘗試，但是我對CSS和Javascript的了解有限。 我需要別人的幫助，以使我的頁面像我上面發布的網站一樣工作。

預先感謝...請幫助我

我的HTML頁面：

<html>
  <head>
   <style type="text/css">
   .product_head {
    overflow: hidden;
    width: 703px;
    height: 35px;
    padding: 0px;
    position: relative;
    border: 1px solid rgb(141, 196, 120);
    font-family: verdana,geneva,Arial,helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: relative;
        background-color: #27638C;
        color: #FFFFFF;
        font-size: 105%;
}
.product_page_box {
    overflow: hidden;
    width: 204px;
    height: 250px;
    padding: 0px;
    margin: 2px 10px 5px 2px;
    float: left;
    position: relative;
    border: 1px solid rgb(141, 196, 120);
    font-family: verdana,geneva,Arial,helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px 5px 5px 5px;
}
.product_head .product_page_box ol, ul {
    list-style: none outside none;
}

.product_container_head {
    width: 204px;
    height: 25px;
    background-color: rgb(234, 248, 228);
    padding: 10px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
.product_container_head a {
        color: #27638C;
        text-transform: uppercase;
}
.product_details {
        width: 172;
        height: 25px;
        vertical-align: middle;
        text-align: center;
        padding: 20px 10px 10px 0px;
    position: relative;
    margin: 10px;
    border: 1px solid rgb(141, 196, 120);
        cursor: pointer;
}
</style>

</head>
<body>
<div>
<div class="product_head">
    <p> main title </p>
</div>
<div>
    <ul>
        <li>
            <div class="product_page_box">
                <div class="product_container_head">
                    aa title </div>
                <div class="product_details">
                    aa 1 </div>
                <div class="product_details">
                    aa 2 </div>
                <div class="product_details">
                    aa 3 </div>
             </div>
        </li>
            <li>
            <div class="product_page_box">
                <div class="product_container_head">
                    bb title </div>
                <div class="product_details">
                    bb 1 </div>
                                <div class="product_details">
                    bb 2 </div>
                <div class="product_details">
                    bb 3 </div>
            </div>
        </li>
                <li>
            <div class="product_page_box">
                <div class="product_container_head">
                    cc title </div>
                <div class="product_details">
                    cc 1 </div>
                                <div class="product_details">
                    cc 2 </div>
                <div class="product_details">
                    cc 3 </div>
            </div>
        </li>
                <li>
            <div class="product_page_box">
                <div class="product_container_head">
                    dd title </div>
                <div class="product_details">
                    dd 1 </div>
                                <div class="product_details">
                    dd 2 </div>
                <div class="product_details">
                    dd 3 </div>
            </div>
        </li>
                <li>
            <div class="product_page_box">
                <div class="product_container_head">
                    ee title </div>
                <div class="product_details">
                    ee 1 </div>
                                <div class="product_details">
                    ee 2 </div>
                <div class="product_details">
                    ee 3 </div>
            </div>
        </li>
    </ul>
</div>
</div>
</body>
</html>

Answer 1

使用一些jQuery插件，例如http://www.menucool.com/javascript-image-slider或http://wowslider.com/

需要幫助來創建帶有css div ul li list的html頁面以使其旋轉

問題描述

1 個解決方案

解決方案1
0 2014-02-20 19:38:08

需要幫助來創建帶有css div ul li list的html頁面以使其旋轉

問題描述

1 個解決方案

解決方案1 0 2014-02-20 19:38:08

解決方案1
0 2014-02-20 19:38:08