Question

这是我的轮播代码（图片滑块）。我想知道如何在我的网页上重新定位整个滑块。我基本上想把它整整一点向左移动。如果链接到此滑块的网站是http://www.menucool.com/javascript-image-slider，我也在这里制作了一个jsfiddle http://jsfiddle.net/lasquish/cynar4ug/。网站代码小提琴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

你的小提琴不是为我加载的，但根据这段代码，它将是这样的：

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

其中-30px是您想要移动滑块的左侧像素数量。更好的选择是在像

这样的容器中添加滑块

<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

时更好地控制并避免出现问题

在网页上移动轮播（图像滑块）

1 个答案: