爲什麼我的圖片無法載入我的幻燈片？

我仍在建立我的網站，並在網絡上找到了一個很好的佈局。我下載了他們的預覽包並進行了編輯，以便反映我想要的內容。爲什麼我的圖片無法載入我的幻燈片？

但我有一個問題，讓我的圖像加載幻燈片。第一張幻燈片目前我只有一張圖像，並且希望在我移動到另外兩張之前完成這一步。

下面是HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>Welcome to Kustum Kostumes</title> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]--> 
<!--[if IE]><style type="text/css" media="screen"> #navigation ul li a em { top:32px; } </style><![endif]--> 

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script> 
<script src="js/jquery-func.js" type="text/javascript"></script> 
</head> 
<body> 

<!-- Header --> 
<div id="header"> 
<div class="shell"> 

    <!-- Logo --> 
    <h1 id="logo"><a href="#">Company Name</a></h1> 
    <!-- End Logo --> 

</div> 
</div> 
<!-- End Header --> 

<!-- Slider --> 
<div id="slider"> 
<div class="shell"> 

    <!-- Slides --> 
    <div class="slides"> 
     <ul> 
      <!-- Slide --> 
      <li> 
       <div class="slide-info"> 
        <h2><span>Mascots</h2> 
        <p>Blah Blah Blah</p> 
        <p>Blah Blah Blah </p> 
       </div> 
       <span class="slide-image image1"></span> 
      </li> 
      <!-- End Slide --> 

      <!-- Slide --> 
      <li> 
       <div class="slide-info"> 
        <h2><span>Props</h2> 
        <p>Blah Blah Blah</p> 
        <p>Blah Blah Blah. </p> 
       </div> 
       <span class="slide-image image2"></span> 
      </li> 
      <!-- End Slide --> 

      <!-- Slide --> 
      <li> 
       <div class="slide-info"> 
        <h2><span>Armour</span> and More!!!</h2> 
        <p>Blah Blah Blah</p> 
        <p>Blah Blah Blah </p> 
       </div> 
       <span class="slide-image image3"></span> 
      </li> 
      <!-- End Slide --> 

     </ul> 
    </div> 
    <!-- End Slides --> 

    </div> 
</div> 
<!-- End Slider --> 

<!-- Slider Nav --> 
<div id="slider-navigation"> 
<div class="shell"> 
    <ul> 
     <li><a href="#" class="active"><strong>About Us</strong><em class="ico1"></em></a></li> 
     <li><a href="#"><strong>Services</strong><em class="ico2"></em></a> </li> 
     <li class="last"><a href="#"><strong>Contact</strong><em class="ico3"></em></a></li> 
    </ul> 
</div> 
</div> 
<!-- End Slider Nav --> 

<!-- Main --> 
<div id="main"> 
<div class="shell"> 

    <!-- Cols --> 
    <div class="cols"> 
     <div class="cl">&nbsp;</div> 

     <!-- Col --> 
     <div class="col"> 
      <h3>Blah Blah Blah</h3> 
      <p>Blah Blah Blah</p> 
      <p>Blah Blah Blah</p> 
     </div> 
     <!-- End Col --> 

     <!-- Col --> 
     <div class="col"> 
      <h3>Blah Blah Blah</h3> 
      <p>Blah Blah Blah</p> 
      <p>Blah Blah Blah</p> 
     </div> 
     <!-- End Col --> 

     <!-- Col --> 
     <div class="col col-last"> 
      <h3>Blah Blah Blah</h3> 
      <p>Blah Blah Blah</p> 
      <p>Blah Blah Blah</p> 
     </div> 
     <!-- End Col --> 

     <div class="cl">&nbsp;</div> 
    </div> 
    <!-- End Cols --> 

</div> 
</div> 
<!-- End Main --> 

<!-- Footer --> 
<div id="footer"> 
<div class="shell"> 

    <a href="//www.etsy.com/shop/KustumKostumes?ref=offsite_badges&utm_source=sellers&utm_medium=badges&utm_campaign=en_isell_3"><img width="728" height="90" src="//img0.etsystatic.com/site-assets/badges/en/en_isell_3.png"></a> 

    <!-- Footer Nav --> 
    <div class="right"> 
     <p> 
      <a href="#">Home</a> 
      <span>|</span> 
      <a href="#">Services</a> 
      <span>|</span> 
      <a href="#">Contact</a> 
     </p> 
      <p>Copyright &#169; ABN 78 820 831 193</p> 
<p> <a href="http://www.kustumkostumes.com.au">http://www.kustumkostumes.com.au</a></p> 
    </div> 
    <!-- End Footer Nav --> 

</div> 
</div> 
<!-- End Footer --> 

</body> 
</html>

這裏是CSS樣式表

* { padding:0; margin:0; outline:0; } 
body { 
    background:#000; 
    font-family: Arial, sans-serif; 
    font-size:12px; 
    line-height:20px; 
color:#252525; 
} 
input, textarea, select { font-family: Arial, sans-serif; font-size:12px; } 

.notext { font-size:0; line-height:0; text-indent: -4000px; display:block; } 

a img { border:0; } 

a { color:#9d5f0e; text-decoration: underline; cursor:pointer; } 
a:hover { text-decoration: none; } 

.left, .alignleft { float:left; display:inline; } 
.right, .alignright { float:right; display:inline; } 

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; } 

.al { text-align: left; } 
.ar { text-align: right; } 
.ac { text-align: center; } 

h2 { font-size:34px; line-height:34px; text-transform: uppercase; color:#fff; } 
h2 span{ color:#f4d359; } 
h3 { font-size:22px; line-height:24px; } 

h2, h3, 
#navigation, 
#slider-navigation, 
#footer { font-family: "Trebuchet MS", Arial, sans-serif;} 

h1#logo { font-size:0; line-height:0; width:716px; height:77px; float:center; } 
h1#logo a{ display:block; height:77px; text-indent: -4000px;  background:url(images/Banner1.jpg); } 

.shell { width:980px; margin:0 auto; } 

body { min-width:1030px;} 

#header { height:90px; background:url(images/header.gif); } 

#navigation { float:right; } 
#navigation ul{ float:left; list-style-type: none; padding-top:37px; font-size:14px;} 
#navigation ul li{ float:left; display:inline; height:21px; background:url(images/nav-border.gif) repeat-y right 0; padding:0 20px 0 0; margin-right:20px; position:relative; } 
#navigation ul li.last{background:transparent; padding-right:0; margin-right:0; } 
#navigation ul li a{ float:left; color:#fff; text-decoration: none;} 

#navigation ul li a em { width:90px; height:20px; background:url(images/nav-hover.gif) no-repeat 0 -200px; position:absolute; top:33px; left:-55px;} 
#navigation ul li.last a em { left:-45px;} 
#navigation ul li a span { font-size:0; line-height:0; width:0; height:0; position:absolute; left:50%;} 

#navigation ul li a.hover{ color:#f6cb44;} 

#navigation ul li a.hover em{ background-position:0 0} 

#slider { height:250px; background:url(images/slider.gif); } 

.slides { width:980px; height:298px; position:relative; overflow:hidden; color:#b6b6b6; } 
.slides .jcarousel-clip { width:980px; height:298px; position:relative; overflow:hidden; } 
.slides ul { width:980px; height:298px; position:relative; overflow:hidden; list-style-type: none;} 
.slides ul li{ float:left; display:inline; width:980px; height:260px; position:relative; overflow:hidden; padding-top:38px;} 

.slide-info { float:left; width:720px; padding-top:20px;} 
.slide-info h2{ padding-bottom:20px;} 
.slide-info p{ padding-bottom:15px;} 
.slide-image { float:right; width:219px; height:240px; } 
.image1 { background:url(images/Untitled-1.png); } 

#slider-navigation { height:67px; background:url(images/slider-nav.gif); } 
#slider-navigation ul{ list-style-type: none; position:relative; width:1003px; margin-right:-23px; height:67px;} 
#slider-navigation ul li{ float:left; display:inline; position:relative; margin:-35px 95px -22px 0;} 
#slider-navigation ul li.last{ margin-right:0;} 
#slider-navigation ul li a{ float:left; width:171px; height:79px; background:url(images/slide-button.png) no-repeat 0 0; position:relative; 
left:-10px; color:#686767; font-size:14px; text-decoration: none; font-weight: bold; padding:45px 0 0 100px;} 

#slider-navigation ul li a strong { display:block; font-size:23px; line-height:23px; color:#fff;} 
#slider-navigation ul li a em{ position:absolute; top:43px; left:20px; } 

#slider-navigation ul li a em.ico1 { width:58px; height:59px; background:url(images/ico1.png); left:28px;} 
#slider-navigation ul li a em.ico2 { width:41px; height:61px; background:url(images/ico2.png); left:36px;} 
#slider-navigation ul li a em.ico3 { width:71px; height:64px; background:url(images/ico3.png)} 

#slider-navigation ul li a.active, 
#slider-navigation ul li a:hover { background:url(images/slide-button-active.png); color:#a6a6a6; } 

#slider-navigation ul li a.active strong, 
#slider-navigation ul li a:hover strong{ color:#000; } 


#main { width:100%; background:#d3d4ce; padding:50px 0;} 
#main h3{ padding-bottom:10px; } 
#main p{ padding-bottom:15px; } 

a.more { font-size:10px; background:url(images/more.gif) no-repeat 0 center; padding-left:10px; } 

.cols {} 
.col { float:left; width:250px; margin-right:115px;} 
.col-last { margin-right:0;} 



#footer { height:92px; background:url(images/footer.gif); color:#6d6d6d; } 
#footer .shell{ padding-top:28px;} 
#footer .right { white-space:nowrap; font-size:14px; text-align: right;} 
#footer .right span{ padding:0 1px;} 
#footer .right a{ text-decoration: none; color:#939393;} 
#footer .right a:hover{ color:#f6cb44;} 
.footer-logo { float:left; width:169px; height:34px; background:url(images/footer-logo.gif); }

這裏是IE6樣式表

.image1 
{ background: none; (src='css/images/Untitled-1.png', sizingMethod='image');} 

#slider-navigation ul li a 
{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/slide- button.png', sizingMethod='image');} 

#slider-navigation ul li a em.ico1 
{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/ico1.png', sizingMethod='image');} 

#slider-navigation ul li a em.ico2 
{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/ico2.png', sizingMethod='image');} 

#slider-navigation ul li a em.ico3 
{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/ico3.png', sizingMethod='image');} 

#slider-navigation ul li a.active, 
#slider-navigation ul li a:hover 
{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/slide-button-active.png', sizingMethod='image');}

編輯：這是我的javascript

$(document).ready(function(){ 
$('.slides ul').jcarousel({ 
    scroll: 1, 
    wrap: 'both', 
    auto: 6, 
    initCallback: _init_carousel, 
    itemFirstInCallback:_first_callback, 
    buttonNextHTML: null, 
    buttonPrevHTML: null 
}); 

$('#navigation li').hover(
    function(){ $(this).find('a').addClass('hover') }, 
    function(){ $(this).find('a').removeClass('hover') } 
); 
}); 

function _init_carousel(carousel) { 
$('#slider-navigation a').bind('click', function() { 
    var index = $(this).parent().parent().find('a').index(this) + 1; 
    carousel.scroll(index); 
    return false; 
}); 
}; 

function _first_callback(carousel, item, idx, state) { 
var index = idx - 1; 
$('#slider-navigation a').removeClass('active'); 
$('#slider-navigation a').eq(index).addClass('active'); 
};

這裏是一個小提琴
https://jsfiddle.net/x3asv93x/

我是什麼真正的錯誤，雖然它不會加載我的圖片將Untitled-1.png，將加載與預覽回來的圖像。它爲什麼這樣做？我應該可以用我自己的圖片替換幻燈片中的圖片。

請幫

來源

2016-02-06 Stuart Mander

給小提琴演示 – Krish

什麼是小提琴演示？ –

https://jsfiddle.net/，請分享你的代碼在這裏演示 – Krish

，首先將所有的scripts下面footer：

<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>Welcome to Kustum Kostumes</title> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]--> 
<!--[if IE]><style type="text/css" media="screen"> #navigation ul li a em { top:32px; } </style><![endif]--> 

</head> 
..... 
..... 
...... 
<!-- Footer --> 
<div id="footer"> 
<div class="shell"> 

    <a href="//www.etsy.com/shop/KustumKostumes?ref=offsite_badges&utm_source=sellers&utm_medium=badges&utm_campaign=en_isell_3"><img width="728" height="90" src="//img0.etsystatic.com/site-assets/badges/en/en_isell_3.png"></a> 

    <!-- Footer Nav --> 
    <div class="right"> 
     <p> 
      <a href="#">Home</a> 
      <span>|</span> 
      <a href="#">Services</a> 
      <span>|</span> 
      <a href="#">Contact</a> 
     </p> 
      <p>Copyright &#169; ABN 78 820 831 193</p> 
<p> <a href="http://www.kustumkostumes.com.au">http://www.kustumkostumes.com.au</a></p> 
    </div> 
    <!-- End Footer Nav --> 

</div> 
</div> 
<!-- End Footer --> 

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script> 
<script src="js/jquery-func.js" type="text/javascript"></script> 

</body> 
</html>

來源

2016-02-06 09:18:09

我將腳本添加到頁腳底部。結果沒有變化。 –

@Stuart Mander，你有沒有正確的旋轉木馬標記？ http://sorgalla.com/jcarousel/docs/reference/installation.html –

我不知道。我看過鏈接和例子。旋轉木馬腳本位於我的html頁腳處。但正如我前面提到的那樣，這是一個我在頂端工作的模板，我只是想改變它上面的圖像。我沒有寫任何代碼的一部分來改變文本，並添加我的abn和網站名稱和我的橫幅。我刪除了圖像，並用我自己的Untitled-1.png替換，並且不加載。如果有幫助，我所看到的就是所謂的滑塊。我是否將它改爲jscarousel？ –

爲什麼我的圖片無法載入我的幻燈片？

回答

相關問題