Question

我在不同类别下创建了多个带有jquery的html幻灯片。例如，Under＆＃39; POOLS＆＃39;类别我有一个幻灯片，POOLS有3张图片。在“DRIVEWAYS”类别下，我制作了幻灯片或3张Driveways图片。我设置了顶部有一个容器（用于幻灯片），并且我在容器下面也有不同的缩略图。我希望能够将每个缩略图链接到每个幻灯片。每次我点击缩略图时，我都需要这些幻灯片显示在顶部容器中，幻灯片将显示在容器中（具有自己的控件）。有人能告诉我更简单/更快捷的方式来调用这些幻灯片。我只是在学习Javascript，而且我想知道是否有一个选项或方法可以在顶部容器中调用这些html幻灯片。我搜索了几天，我不确定我是否正在搜索正确的关键词。这可能是一件简单的事情，但它让我疯狂地试图解决这个问题。非常感谢任何帮助!!!!

Answer 1

<强> HTML

<div id="EX2contentwrapper">
<div id="sliderContainer">
<iframe id="myframe" src="" width="1000" height="400"></iframe>
</div><!--End of slidecontainer-->  

<div id="EX2thumbnailpicsbox">  

    <!--first row of images-->
    <div id="thumbs">
    <img id="EX2-Poolspic" class="thumbs" src="http://i101.photobucket.com/albums/m55/ladybytesjdb/ACsite/EX2_Poolspic_zps6a6a33d1.jpg">
    <img id="EX2-Patiospic" class="thumbs" src="http://i101.photobucket.com/albums/m55/ladybytesjdb/ACsite/EX2_Patiospic_zps91f4842c.jpg">
    <img id="EX2-Stairspic" class="thumbs" src="http://i101.photobucket.com/albums/m55/ladybytesjdb/ACsite/EX2_Stairspic_zps53af8abd.jpg">
    <img id="EX2-Walkwayspic" class="thumbs" src="http://i101.photobucket.com/albums/m55/ladybytesjdb/ACsite/EX2_Walkwayspic_zpsd79a1a2a.jpg">              

    <!--first row of caption-->
    <div class="EX2-Pooltxt"></div>
    <div class="EX2-Patiostxt"></div>
    <div class="EX2-Stairstxt"></div>
    <div class="EX2-Walkwaystxt"></div>
    </div><!--End of thumbs-->
  </div><!-- End of EX2thumbnailpicsbox-->

<强>的jQuery

$(document).ready(function () {
    $("#EX2-Poolspic").hover(
    function () {
    $("#myframe").attr("src", "http://s101.photobucket.com/user/ladybytesjdb/slideshow/ACsite");
    });
});

<强> CSS

#EX2contentwrapper {
    width: 2000px;
    height: auto;
    margin: 0 auto;
}
#sliderContainer{
    background-color: #989898;
    width: 1000px;
    height: 400px;
    float: left;
}
#EX2thumbnailpicsbox {
    width: 1066px;
    height: 539px;
    display: block;
    float: left;
    z-index: 99;
}

#thumbs {
    width: 1066px;
    height: auto;
    display: block;
    float: left;
}
#EX2-Poolspic {
    width: 274px;
    height: 229px;
    float: left;
    position: relative;
    z-index: 99;
}

#EX2-Patiospic {
    width: 261px;
    height: 229px;
    float: left;
    position: relative;
}

#EX2-Stairspic {
    width: 260px;
    height: 229px;
    float: left;
    position: relative;
}

#EX2-Walkwayspic {
    width: 271px;
    height: 229px;
    float: left;
    position: relative;
}

#EX2-Pooltxt {
    width: 274px;
    height: 31px;
    float: left;
    position: relative;
}

.EX2-Patiostxt {
    width: 261px;
    height: 31px;
    float: left;
    position: relative;
}

.EX2-Stairstxt {
    width: 260px;
    height: 31px;
    float: left;
    position: relative;
}
.EX2-Walkwaystxt {
    width: 271px;
    height: 31px;
    float: left;
    position: relative;
}

<强> Fiddle Demo

在同一个div容器中有多个幻灯片的javascript

1 个答案: