javascript - 使轮播(图像 slider )在网页上移动

Question

这是我的旋转木马(图像 slider )的代码。我想知道如何在我的网页上重新定位整个 slider 。我基本上想将它作为一个整体向左移动一点。链接到此 slider 的网站是 http://www.menucool.com/javascript-image-slider我也在这里制作了一个 jsfiddle http://jsfiddle.net/lasquish/cynar4ug/ .网站代码fiddle http://jsfiddle.net/lasquish/Low0emf1/

-感谢您的帮助!

<div class="div1">
    <a href="demo1.html" class="current"></a>
</div>

<div id="sliderFrame">
    <div id="slider" style="text-align: center;">
        <a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
            <img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
        </a>
        <img src="images/image-slider-1.jpg" />
        <img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
        <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
        <img src="images/image-slider-5.jpg" />
    </div>
    <div id="htmlcaption" style="display: none;">
        <a href="http://www.google.com/">Click me: To start selling and trading!</a>.
    </div>
</div>

Answer 1

你的 fiddle 没有为我加载，但基于这段代码它会是这样的:

#sliderFrame {
    position: relative;
    width: 960px;
    margin: 0px auto;
    left: -30px;
}

其中 -30px 是您要将 slider 向左移动的像素数量。一个更好的选择是将 slider 添加到容器中，例如

<div class="slide_contain">
<div id="sliderFrame">
    <div id="slider" style="text-align: center;">
        <a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
            <img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
        </a>
        <img src="images/image-slider-1.jpg" />
        <img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
        <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
        <img src="images/image-slider-5.jpg" />
    </div>
    <div id="htmlcaption" style="display: none;">
        <a href="http://www.google.com/">Click me: To start selling and trading!</a>.
    </div>
</div>

</div>

现在在您的 CSS 中，添加以下内容:

.slide_contain {
    position:relative;
    width:960px;
    height:auto;
    min-height:300px
}
#sliderFrame {
    position: absolute;
    width: 960px;
    margin: 0px auto;
    left: -30px;
}

此方法可以让您更好地控制并避免在移动 sliderFrame div 时出现问题