我有幻灯片,它只是改变照片。我需要在每张照片的顶部添加一个新的div框。目前jquery代码只需#slideshow和.active。如何修改它以获取新的div类“.newbox”(.newbox1用于第一张照片,.newbox2用于第二张等等)。每次不同的盒子必须出现在不同的照片之上。这是我的照片幻灯片jquery代码:
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$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()", 5000 );
});
</script>
我的HTML:
div id="slideshow">
<div class="active">
<a href="http://www.mylink.com/" target="_blank"><img src="http://route/img.jpg" alt="alt" /></a>
<div class="newbox"></div>
</div>
答案 0 :(得分:0)
您应该使用jquerys wrap方法
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
要包装的jquery代码
$('.inner').wrap('<div class="new" />');
变为
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
在你的情况下,我假设它将是
$("img"). wrap('<div class="new" />');