Question

我刚刚将一个滑块和旋转木马添加到我的Volusion网站主页。然而，当我去页面时，第一个旋转木马图像会爆炸到一个巨大的尺寸（原始尺寸只有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>

对于主滑块：

    <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文件，但幻灯片显示无效，所以我不得不将它们直接移到主页上。

任何帮助都将不胜感激。

Answer 1

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

尝试删除这些行，您为同一个类调用滑块2次。

Answer 2

我不认为Flexslider的问题导致了这个问题。

据我所知，这是由于壁纸色板以100％的宽度显示，然后才会出现惊人的旋转木马插件并将图像包裹到较小的宽度。

尝试将其添加到样式表

.amazingcarousel-item {
    float: left;
    width: 150px;
}

默认情况下，这将为轮播项目提供宽度，这反过来会使其中的图像宽度变小。

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

2 个答案: