Question

我正在学习如何从头开始创建图像滑块。功能方面都很好。但我想让滑块响应。如果你打开小提琴链接，并尝试调整窗口大小（当显示第一个图像时），那么你可以看到，我想要为所有幻灯片实现什么。按next或prev，调整窗口大小，然后你会看到问题是什么，其他图像在滑块区域伸展......所以，无论如何我可以让这个版本响应吗？或者我应该以不同方式构建它？

p.s图像的下一部分是可见的，因此用户也可以单击下一个图像。它应该如何。

这是小提琴。 http://jsfiddle.net/DkFnL/

代码的一部分 -

gallery-wrapper
{
    border-left:220px solid rgb(243,239,223);
    height: 75%;
}
#gallery-menu
{
    width:220px;
    margin-left: -220px;
    text-align: center;
}
#slider
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#slider ul
{
    width: 750%;

}
#slider ul li 
{
    width:10%;
    float:left;
    margin-right: 5px;
}
#slider ul li img
{
    width: 100%;
}

Answer 1

我在那里检查了其他响应式滑块。事实证明，我需要改变的主要事情是jquery.animate中的负边缘，我用它来进行图像显示。将其从px更改为％。

Answer 2

你可以像这样创建另一个div HTML

<div id="slider">
    <div id="sliderscroll">
        <ul>
            <li><img src="assets/img/gallery/sliderimg1.jpg" alt="sliderimg1"></li>
            <li><img src="assets/img/gallery/sliderimg2.jpg" alt="sliderimg2"></li>
            <li><img src="assets/img/gallery/sliderimg3.jpg" alt="sliderimg3"></li>
            <li><img src="assets/img/gallery/sliderimg4.jpg" alt="sliderimg4"></li>
        </ul>
   </div>    
</div>

CSS

#sliderscroll{
    width:750%;
    left:0px;
}
#slider ul
{
    width: 100%;
    position:relative;
}

然后将您的功能更改为像这样的百分比 Javascript

function transition( container, loc, direction) {
  var unit; // vai nu + vai -, lai zin uz kuru pusi jaiet
  if (direction && loc !== 0)
  {
        unit = ( direction === "next") ? "-=" : "+=" // tas pats kas if
  }
    container.animate({
        "margin-left" : (unit ? (unit + 10) : 0)+"%",
        "left":(unit ? (unit +5) : 0)+"px"
  });
}

http://jsfiddle.net/DkFnL/2/

添加图像滑块的重叠性

2 个答案: