Question

我在我的网站上使用jQuery Smooth Scrolling插件，并且只想移动显示在滚动元素容器旁边的箭头，而不是它们在其中。如果您将鼠标悬停在页面中间的旋转木马上，它将让您左右滚动。我打算让箭头永久可见左右两边。如何将箭头移动到滚动条容器外部并在左侧和右侧显示它们？

这是一个实时网址链接 - http://bit.ly/1dIDzFJ 插件主页 - http://smoothdivscroll.com/

使用jQuery动态创建/显示箭头。但是现在正在实现平滑滚动jQuery的一些HTML / CSS。

HTML

<div class="box-product" id="makeMeScrollable">
                        <div id="carousel-product">
                            <div class="span2">
                                <img src="img/ted.jpg" />
                                <p class="product-carousel-title">Angry Birds Adult Costume</p>
                                <h5>ONLY &#163;46.99</h5>
                                <a href="#"><img src="img/addtocart.jpg" /></a>
                            </div>
                        </div>
                        <div id="carousel-product">
                            <div class="span2">
                                <img src="img/ted.jpg" />
                                <p class="product-carousel-title">Angry Birds Adult Costume</p>
                                <h5>ONLY &#163;46.99</h5>
                                <a href="#"><img src="img/addtocart.jpg" /></a>
                            </div>
                        </div>
                        <div id="carousel-product">
                            <div class="span2">
                                <img src="img/ted.jpg" />
                                <p class="product-carousel-title">Angry Birds Adult Costume</p>
                                <h5>ONLY &#163;46.99</h5>
                                <a href="#"><img src="img/addtocart.jpg" /></a>
                            </div>
                        </div>
                        <div id="carousel-product">
                            <div class="span2">
                                <img src="img/ted.jpg" />
                                <p class="product-carousel-title">Angry Birds Adult Costume</p>
                                <h5>ONLY &#163;46.99</h5>
                                <a href="#"><img src="img/addtocart.jpg" /></a>
                            </div>
                        </div>
                        <div id="carousel-product">
                            <div class="span2">
                                <img src="img/ted.jpg" />
                                <p class="product-carousel-title">Angry Birds Adult Costume</p>
                                <h5>ONLY &#163;46.99</h5>
                                <a href="#"><img src="img/addtocart.jpg" /></a>
                            </div>
                        </div>
                        <div id="carousel-product">
                            <div class="span2">
                                <img src="img/ted.jpg" />
                                <p class="product-carousel-title">Angry Birds Adult Costume</p>
                                <h5>ONLY &#163;46.99</h5>
                                <a href="#"><img src="img/addtocart.jpg" /></a>
                            </div>
                        </div>
                    </div><!-- end makemescrollable -->

CSS

div.scrollingHotSpotLeft {
left: 5%;
}

#makeMeScrollable div.scrollableArea img
{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
       block of code. It's just a nice feature that prevent the images from
       accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Answer 1

我会使用CSS来定位箭头：

.scrollingHotSpotRight { posistion:relative; right:-50px; }
.scrollingHotSpotLeft { posistion:relative; left:-50px; }

移动平滑滚动的jquery箭头的位置

1 个答案: