html - 为什么我的图片无法加载到我的幻灯片中？

标签 html css image slideshow

我仍在 build 我的网站，我在网络上找到了一个很好的布局。我下载了他们的预览包并对其进行了编辑，以使其反射(reflect)我的需求。

但是我在将图像加载到幻灯片中时遇到了问题。我目前只有一张图片用于第一张幻灯片，我想在我移动到另外两张之前完成它。

这是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');
};

这是一个 fiddle
https://jsfiddle.net/x3asv93x/

真正让我烦恼的是，虽然它不会加载我的图像 Untitled-1.png，但它会加载预览附带的图像。为什么要这样做？我应该能够用自己的图片替换幻灯片中的图片。

请帮忙

最佳答案

首先将所有脚本移动到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>

关于html - 为什么我的图片无法加载到我的幻灯片中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35239187/

上一篇：javascript - Bootstrap 行高随单个 div 变化

下一篇：javascript - 悬停时更改导航栏中文本的颜色

相关文章：

html - 跨多个 <th> 元素的奇异水平渐变

javascript - 使用 jquery 操作 css "content: attr(data-tooltip)"

html - 如何删除 HTML 表格中行之间的分隔？

解析图像时 Angular 5 HTTP 失败

image - 从 Excel 文档中提取图像

html - 居中混合文本和图形的无序列表

javascript - 每个条目具有背景颜色填充和边框的 Css Textarea 文本

javascript - 如何从具有不同键值对的 JSON 文件中读取数据

html - Google Web 字体字体粗细无法正确呈现

html - 如何在选择下拉菜单上设置 Font Awesome 图标？

©2024 IT工具网  联系我们