javascript - 幻灯片图像在页面加载时爆炸

我刚刚在我的 Volusion 网站主页上添加了一个 slider 和旋转木马。但是，当我转到该页面时，第一个轮播图像会放大到一个巨大的尺寸(原始尺寸只有 180 x 270)并闪烁两次。所以我查看了代码并删除了一行:

<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>

因为我认为它可能会尝试加载 javascript 两次或类似的东西。

在我这样做之后，轮播图像在加载时仍然膨胀到一个巨大的尺寸，但只有一次。

这是它发生的页面:http://www.wallsrepublic.com

我主页上的所有相关代码如下:

 <script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>

对于主 slider :

    <link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});


$(window).load(function() {
  $(".flexslider").flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});
</script>

<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>

对于有问题的轮播:

    <script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
    <link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
    <script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>


<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
    <div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
        <div class="amazingcarousel-list-container">
            <ul class="amazingcarousel-list">
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK   " ><img src="http://wallsrepublic.com/v/carousel/1.png"  alt="GOLD DAMASK   " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GOLD DAMASK  </div>
    <div class="amazingcarousel-description">$159 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY    " ><img src="http://wallsrepublic.com/v/carousel/2.png"  alt="GREY OVERLAY  " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GREY OVERLAY </div>
    <div class="amazingcarousel-description">$89 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png"  alt="BLACK & WHITE DOGSTOOTH   " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH  </div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png"  alt="BROWN FAWN    " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BROWN FAWN   </div>
    <div class="amazingcarousel-description">$139 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png"  alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">SERENITY SAND</div>
    <div class="amazingcarousel-description">$149 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png"  alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLOCK-STONE GREY</div>
    <div class="amazingcarousel-description">$79 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png"  alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
    <div class="amazingcarousel-description">$79 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png"  alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">TIA GOLD</div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png"  alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
    <div class="amazingcarousel-description">$399 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png"  alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
    <div class="amazingcarousel-description">$89 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png"  alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png"  alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GOLD VICTORIAN</div>
    <div class="amazingcarousel-description">$149 USD</div>
</div>                    </div>
                </li>
            </ul>
            <div class="amazingcarousel-prev"></div>
            <div class="amazingcarousel-next"></div>
        </div>
        <div class="amazingcarousel-nav"></div>
    </div>
</div>

我之前在我的模板标题中有 javascript 和 css 文件，但后来幻灯片放映不起作用，所以我不得不将它们直接移动到主页上。

如有任何帮助，我们将不胜感激。

最佳答案

$(window).load(function() {
$(".flexslider").flexslider();
});

尝试删除这些行，您正在为同一类调用 slider 2 次。

关于javascript - 幻灯片图像在页面加载时爆炸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28881986/

javascript - 幻灯片图像在页面加载时爆炸

上一篇：html - 在页面上所有 DIV 部分的顶部显示图像

下一篇：html - 如果选中复选框，则更改一个 div 尺寸 - 仅限 html css