我正在尝试创建一个页面,用户可以通过单击按钮将 jquery 滑块库添加到页面。
我几乎让它工作了,但是当有多个滑块时,附加滑块上的图像旋转出现问题。原来的 slder 跳来跳去,只显示两个图像。
我创建了一个 jsfiddle 来演示http://jsfiddle.net/UUKP4/25/
附加的滑块只循环一次然后停止
非常感谢任何帮助。
小提琴的代码
CSS:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
脚本
var i;
var topplus=50;
function buildslider(i, id, content) {
id = id + i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.style.position = "absolute";
newdiv.style.top = +topplus + "px";
newdiv.style.left = +topplus + "px";
newdiv.style.display = 'inline-block';
newdiv.style.width = '320px';
newdiv.style.height = '270px';
newdiv.innerHTML = content;
document.getElementById("content").appendChild(newdiv);
topplus=topplus+150;
function slideSwitch() {
var $active = $('#' + id + ' #slide_image.active');
if ($active.length === 0) $active = $('#' + id + ' #slide_image:last');
var $next = $active.next().length ? $active.next() : $('#' + id + ' #slide_image:first');
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval(slideSwitch, 3000);
});
i++;
}
function addSlider() {
buildslider('i', 'draggable', '<div id="slideshow"><img id="slide_image" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');
}
HTML
<input type='button' value='add slider' id='addSlider' onclick='addSlider();'>