0

在阅读了一些关于 stackoverflow 的帖子后，我尝试了一些方法来让我的 div 并排放置，但没有成功。我以前从未以任何重要的方式使用过 CSS，所以我很挣扎。

我有一个幻灯片，我想从页面的右边缘滑入。滑块的左边缘应该有一个 div 允许关闭滑块（在下面的代码中称为 clickme），滑块的右侧包含一个包含 carouFredSel 的 div（在下面的代码中称为 image_carousel） .

我有两个问题：

  1. 滑块不顺滑。我已经尝试了在#slideout 的transition CSS 属性中可以找到的所有内容，但滑块仍然只是出现而不是从右侧滑动。

  2. 包含轮播 (#image_carousel) 的 div 不位于 #clickme 的右侧。我想让#slideout 用#clickme 占用左边的10%，用#image_carousel 占用右边的90%。#clickme 确实占据了左边的 10%，但是 #image_carousel 的位置，嗯，有点在 clickme 的顶部，也没有占据右边的 90%。如果我有 image_carousel 的 position = relative ，那么它看起来会好一些，但仍然不正确。

这是代码。我从他们网站上的示例中复制的 carouFredSel 内容。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.carouFredSel-6.2.1.js"></script>

<style type="text/css">

    #slideout {
        position: absolute;
        top: 37%;
        right: -360px;
        width: 400px;
        min-height: 25%;
                  /* tried transform instead of width but no difference */
        transition: width 0.3s ease;
        -webkit-transition: width 0.3s ease;
        -moz-transition: width 0.3s ease;
        -ms-transition: width 0.3s ease;
        -o-transition: width 0.3s ease;
        overflow: auto;
        background: #34cbcb;
        -webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
        -moz-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
        box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    }
    .slide-away {
        transform: translate(-360px, 0);
        -webkit-transform: translate(-360px, 0);
        -moz-transform: translate(-360px, 0);
        -ms-transform: translate(-360px, 0);
        -o-transform: translate(-360px, 0);
    }

    #clickme {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 10%;
        float: left;
        background: #870C7E;
    }

</style>

<style type="text/css">

    .image_carousel {
        /* padding: 15px 0 15px 40px; */
        position: relative;

        margin-left: 10%;
    }
    .image_carousel img {
        border: 1px solid #ccc;
        background-color: white;
        padding: 9px;
        margin: 7px;
        display: block;
        float: left;
    }
    a.prev, a.next {
        background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) no-repeat transparent;
        width: 45px;
        height: 50px;
        display: block;
        position: absolute;
        top: 85px;
    }
    a.prev {            left: -22px;
                        background-position: 0 0; }
    a.prev:hover {      background-position: 0 -50px; }
    a.prev.disabled {   background-position: 0 -100px !important;  }
    a.next {            right: -22px;
                        background-position: -50px 0; }
    a.next:hover {      background-position: -50px -50px; }
    a.next.disabled {   background-position: -50px -100px !important;  }
    a.prev.disabled, a.next.disabled {
        cursor: default;
    }
    a.prev span, a.next span {
        display: none;
    }
    .pagination {
        text-align: center;
    }
    .pagination a {
        background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
        width: 15px;
        height: 15px;
        margin: 0 5px 0 0;
        display: inline-block;
    }
    .pagination a.selected {
        background-position: -25px -300px;
        cursor: default;
    }
    .pagination a span {
        display: none;
    }
    .clearfix {
        float: none;
        clear: both;
    }

</style>


<script>

$('#clickme').click(function() {
    $('#slideout').toggleClass('slide-away');
});

</script>

<div id="slideout">

    <div id="clickme">
        <img id="direction" class="chevron" src="left.PNG"/>
    </div>

    <div class="image_carousel">

        <div id="foo2">
            <img src="image1.bmp" alt="" width="60" height="60" />
            <img src="image2.bmp" alt="" width="60" height="60" />
            <img src="image3.bmp" alt="" width="60" height="60" />
            <img src="image4.bmp" alt="" width="60" height="60" />
            <img src="image5.jpg" alt="" width="60" height="60" />
            <img src="image6.jpg" alt="" width="60" height="60" />
        </div>

        <div class="clearfix"></div>

        <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
        <a class="next" id="foo2_next" href="#"><span>next</span></a>

        <div class="pagination" id="foo2_pag"></div>

    </div>

</div>

<script>

    $("#foo2").carouFredSel({
        circular: false,
        infinite: false,
        auto    : false,
        prev    : {
            button  : "#foo2_prev",
            key     : "left"
        },
        next    : {
            button  : "#foo2_next",
            key     : "right"
        },
        pagination  : "#foo2_pag"
    });

    $(function () {

        $("#slideout").hide();

        setTimeout(function(){
              $("#slideout").show();
              $("#direction").attr("src","right.PNG");
              $('#slideout').toggleClass('slide-away');
        },3000);
    });

 </script>

谢谢，

保罗

4

0 回答 0