0

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

ps 下一张图片是可见的，所以用户也可以点击下一张图片。它应该是这样的。

这是小提琴。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%;
}
4

2 回答 2

0

我检查了那里的其他响应式滑块。事实证明，我需要更改的主要内容是 jquery.animate 中的负边距，我将其用于图像显示。将其从 px 更改为 % 。

于 2013-11-13T17:21:53.593 回答
0

你可以创建另一个 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/

于 2013-11-13T17:33:06.333 回答