Javascript Div显示自身的一半两次-使用swipe.js
试图找到一个不需要jQuery操作的滑块库。根据演示,我在同一个swipejs容器中有两个不同宽度的图像Javascript Div显示自身的一半两次-使用swipe.js,javascript,html,slider,slide.js,Javascript,Html,Slider,Slide.js,试图找到一个不需要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="slide
<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";
}
}
上
下一个
var状态=0;
函数状态_change()//哑状态更改函数
{
如果(州)
{
状态=0;
document.getElementById('mSwipe').style.width=“300px”;
}
其他的
{
状态=1;
document.getElementById('mSwipe').style.width=“600px”;
}
}
我放了一个简单的两状态机,看看如果在滑动效果开始之前更改div宽度,我能做些什么。首先,我将大小更改放在swipejs中包含的回调方法中,但没有效果我只想在每次按下按钮时更改div的大小,以便输入的图像适合它
按下按钮时,div将调整到正确的大小,但对于大图像(这是一堆Delicious煎饼),它将在滑动div中滑动并显示大图像的一半两次。我可以切换回较小的图像
如果我打开我的chrome控制台,完整的图像就会显示出来,我没有其他问题了
怎么回事
圆锥体
我对你的代码做了一点修改,并在下面为你创建了一个提琴。
还提供了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>
.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;
}