Question

我正在尝试运行一个幻灯片脚本，该脚本在类.featured的所有元素上运行，但它只在带有callout类的最后一个对象上运行。看起来幻灯片正在加载每个div的图像，但是将它们加载到同一个div中。这是我的剧本：

var images=new Array('http://lorempixel.com/1000/600','http://lorempixel.com/1000/800','http://lorempixel.com/1000/660');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
   if($('.slideshowimage').length!=0)
   {
       $('.slideshowimage').fadeOut(300,function(){slideshowFadeIn();$(this).remove()});
   }
   else
   {
       slideshowFadeIn();
   }
}
function slideshowFadeIn()
{
   $('.featured').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(300,function(){setTimeout(doSlideshow,6000);}));
   if(nextimage>=images.length)
       nextimage=0;
}

.tile {
	background-color: rgba(255,255,255,.7);
	color: rgba(110,185,43,100);
	margin-top:10em;
	min-height: 5em;
	padding: 0;
}

#main .container {
	position: relative;
	z-index: 300;
	padding-top:2em;
	padding-bottom:2em;
}

.window{
	height:40em;
}

.typer p {
	color:#888;
}

.typer a{
	color: rgba (55,158,196,100);
	text-decoration: none;
}

.typer a:hover {
	text-decoration: none;
	opacity: .8;
	transition: all 300ms;
}

.typer h1 {
	font-size: 5.5em;
	margin-bottom:1em;: 
}

.typer h3 {
	color: rgba(55,158,196,100);
	margin-bottom: .5em;
	margin-top: .7em;
	font-size: 1.4em;
}
.typer textarea {
	background-color: transparent;
	border: none;
	width: 80%;
	height: 7em;
	color: #888;
}

.typer textarea:focus {
	box-shadow: rgba(110,185,43,100) 0px 0px 20px;
	border: none;
	outline: none;
}

.typer button {
	color:#FFF;
	background-color: rgba(55,158,196,100);
	border: none;
	padding: .8em;
	margin-top:.5em;
}

.typer button h1 {
	font-size: 1em;
	letter-spacing: .1em;
	margin: 0;

}

.featured {
	position: relative;
	padding:0;
	color:#FFF;
	overflow: hidden;
}

.featured img {
	position: absolute;
    width: 100%;
}

.feature-blue {
	background-color: rgba(55,158,196,100);
	opacity: .6;
	width: 100%;
	height:100%;
	position: absolute;
	z-index: 100;
}

.featured h1 {
	margin-top: 8em;
	font-family: 'Museo Sans Rounded' sans-serif;
	font-weight: 500;
	font-size: 4em;
}

.featured article {
	margin-top: 2em;
	font-size: 1.5em;
	line-height: 1.7em;
	font-weight: 300;
}

.featured p strong{
	font-size: 1.3em;
	letter-spacing: .09em;
}

.featured button {
	color: rgba(55,158,196,100);
	background-color: #FFFFFF;
	border: none;
	padding: .8em;
	margin-top:2em;
}

.featured button h1 {
	font-size: 1em;
	letter-spacing: .8em;
	margin: 0;

}

<div class="tile col-xs-10 col-xs-offset-1">
            <div class="featured">
                <div class="feature-blue"></div>
                <div class="container">
                    <p><strong>Featured</strong></p>
                    <div class="slide1">
                        <h1>At Home In The World</h1>
                        <article>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test .</article>
                        <button>Read More</button>
                    </div>
                </div>
            </div>
        </div>

<div class="tile col-xs-10 col-xs-offset-1">
            <div class="featured">
                <div class="feature-blue"></div>
                <div class="container">
                    <p><strong>Featured</strong></p>
                    <div class="slide1">
                        <h1>At Home In The World</h1>
                        <article>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test .</article>
                        <button>Read More</button>
                    </div>
                </div>
            </div>
        </div>

Answer 1

首先要做的是：您的代码中存在巨大的错误。即使添加了第一个元素，也会不断向页面添加新的图像元素。这意味着您的页面将保持膨胀和膨胀，直到您有内存泄漏。

你对此已经走错了路。你正在使用Javascript编辑你的DOM，这是一个很大的网页设计失误，除非你有充分的理由这样做。相反，您应该在HTML中制作2个图像标记，并使用Javascript分配src属性值并进行淡化。

我现在太累了，无法调试你的代码并做一个有效的例子。我建议你先自己尝试一下，如果你需要任何帮助，可以提出一个新问题。

Answer 2

这是我的新脚本。我以前做过这个，所以我不确定为什么我不只是重用这个脚本。它仍然只影响最后一个。感觉不是两个。我只是使用一个插件，但我不惜一切代价避免使用它。我想开始削弱使用其他人的代码，并且能够自己编写代码。

$(function () {
var Featured = $('.featured');
var backgrounds = [
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))'];
var current = 0;

function nextBackground() {
    Featured.css(
        'background',
    backgrounds[current = ++current % backgrounds.length]);

    setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
Featured.css('background', backgrounds[0]);

}）;

Javascript不影响所选类的所有元素

2 个答案: