0

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

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

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

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;
}
4

1 回答 1

0

我会使用 CSS 来定位箭头：

.scrollingHotSpotRight { posistion:relative; right:-50px; }
.scrollingHotSpotLeft { posistion:relative; left:-50px; }
于 2013-11-04T22:19:16.720 回答