2

试图找到一个我不需要jQuery来操作的滑块库。根据演示，我在同一个 swipejs 容器中有两个不同宽度的图像，

<div id='mSwipe' style='background-color:#ffb6c1;width:300px;height:250px;position:relative; left:800px;' class='swipe'>
  <div id="swipewrape" class='swipe-wrap'>
    <div id="slideone" style="text-align:right;"><img src="http://www.totallygaming.com/sites/default/files/rotor/Commercial%20Intelligence.JPG"/></div>
    <div id="slidetwo" style="text-align:right;"><img src="http://in-formatio.com/wp-content/uploads/2012/02/ihop-free-pancake-day-20091-600x250.jpg"/></div>
  </div>
</div>
<div style='text-align:center;padding-top:20px;'>
  <button onclick='state_change();mySwipe.prev()'>prev</button>
  <button onclick='state_change();mySwipe.next()'>next</button>
</div>

<script>
var state = 0;
function state_change() //Dumb state change function
{
   if(state)
   {
      state = 0;
      document.getElementById('mSwipe').style.width = "300px";
   }
   else
   {
     state = 1;
     document.getElementById('mSwipe').style.width = "600px";

   }
}

我放入了一个简单的小型双态状态机，看看如果我在幻灯片效果开始之前更改 div-width 可以做什么。我首先将大小更改放在 swipejs 中包含的回调方法中，但无济于事。我只想在每次按下按钮时更改 div 大小，以便进入的图像适合它

在按钮按下时， div 将调整到正确的大小，但对于大图像（这是一堆美味的煎饼）来说，它会滑过并在滑动 div 中显示大图像的一半。我可以改回较小的图像就好了

如果我打开我的 chrome 控制台，则会显示完整的图像，并且我没有其他问题。

那是怎么回事？

在此处输入图像描述

4

1 回答 1

3

锥体，

我稍微更改了您的代码，并在下面为您创建了一个小提琴。还为您提供注释掉的 Javascript 上的 jQuery 命令，以防您稍后改变对 jQuery 的看法。

JavaScript

// pure JS
var elem = document.getElementById('slider');
window.mySwipe1 = Swipe(elem, {
    // startSlide: 4,
    // auto: 3000,
    continuous: true,
    // disableScroll: true,
    // stopPropagation: true,
    // callback: function(index, element) {},
    // transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

HTML

<div id='slider' class='swipe'>
    <div class='swipe-wrap'>
        <div>
            <img src="http://www.totallygaming.com/sites/default/files/rotor/Commercial%20Intelligence.JPG" />
        </div>
        <div>
            <img src="http://in-formatio.com/wp-content/uploads/2012/02/ihop-free-pancake-day-20091-600x250.jpg" />
        </div>
    </div>
</div>
<div style='text-align:center;padding-top:20px;'>
    <button class='prev' onclick='mySwipe1.prev()'>prev</button>
    <button class='next' onclick='mySwipe1.next()'>next</button>
</div>

CSS

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float:left;
    width:100%;
    position: relative;
}
.swipe-wrap > div > img {
    margin:10%;
    width:90%;
}
#slider {
    height: auto;
    width:50%;
    left:200px;
}

例子

编辑：更新了小提琴，添加了原始图像大小

例 2

于 2013-08-06T00:30:20.740 回答