Question

我正在尝试创建一个图像库，其中一个大图像和一些小缩略图可以通过滚动查看。我希望能够以两种方式更改中间的图片：（1）使用位于大图像顶部的箭头，（2）通过单击小缩略图。到目前为止，我仍然坚持步骤（1），提出以下代码：

HTML：

<html>

<head>

<link rel="stylesheet" type="text/css" href="1.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="1.js"></script> 

</head>

<body>

<!--part a-->
<div id="imag">
<div class="imageDiv">
<div>
    <img src="http://www.talkandroid.com/wallpapers/images/1/small/1_3D_Landscape__54_.jpg" class="image"/>
</div>
<div>
    <img src="http://www.ifpindia.org/ecrire/upload/mount_landscape01.jpg" class="image"/>
</div>
<div>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/gran_paradiso_wallpaper_landscape_nature_wallpaper_1538.jpg" class="image" />
</div>
<div>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/desert_wallpaper_landscape_nature_wallpaper_1062.jpg" class="image" />
</div>
<div>
    <img src="http://www.bathnes.gov.uk/sites/default/files/siteimages/Environment/Trees-and-Woodlands/16cotswolds1-200x150.jpeg" class="image" />
</div>
<div>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/amazing_sunset_wallpaper_landscape_nature_wallpaper_1506.jpg" class="image" />
</div>
<div>
    <input type="image" src="right arrow.png" class="rightarrow" width="10" height="35"/>
</div>
<div>
    <input type="image" src="left arrow.png" class="leftarrow" width="10" height="35"/>
</div>
</div>
</div>
<!--part a-->

<!--part b-->
<div id="box">
<div class="area">
    <img src="http://www.talkandroid.com/wallpapers/images/1/small/1_3D_Landscape__54_.jpg"/>
    <img src="http://www.ifpindia.org/ecrire/upload/mount_landscape01.jpg"/>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/gran_paradiso_wallpaper_landscape_nature_wallpaper_1538.jpg"/>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/desert_wallpaper_landscape_nature_wallpaper_1062.jpg"/>
    <img src="http://www.bathnes.gov.uk/sites/default/files/siteimages/Environment/Trees-and-Woodlands/16cotswolds1-200x150.jpeg"/>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/amazing_sunset_wallpaper_landscape_nature_wallpaper_1506.jpg"/>
</div>
</div>
<!--part b-->

</body>

</html>

CSS：

#imag {
float:left;
padding:5px;
height:338px;
width:450px;
  }

.rightarrow {
position: absolute;
width:40px;
top: 10px;
left:400px;
}
.leftarrow {
position: absolute;
width:40px;
top: 10px;
left: 0px;
}

#box {
width: 222px;
height: 343px;
overflow-y: scroll;
overflow-x: hidden;
 }

.area img {padding-bottom: 5px;}

JS：

$(document).ready(function () {
$('img:not(:first)').hide();
$(".rightarrow").click(function () {
    $('img:not(:last):visible').
    hide().
    parent().
    next().
    children().
    show();
});
$(".leftarrow").click(function () {
    $('img:not(:first):visible').
    hide().
    parent().
    prev().
    children().
    show();
});
});

我刚开始学习HTML，所以我不太确定这是否是最好的方法，但这是我迄今为止所做的。现在的问题是，如果我删除b部分，部分a工作正常。如果我从代码的标题部分删除部分a和js行，那么部分b工作正常。所以我的问题是如何将两个部分组合在一起才能正确地协同工作？

Answer 1

您可以使用html哈希来更改您所使用的幻灯片。然后使用javascript保存索引并使用它转到下一张或上一张幻灯片

<div class="carousel-full">
    <ul>
        <li id="item5">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
        <li id="item6">
            <img src="http://www.stevegoslingphotography.co.uk/images/general/steve_gosling_photography.jpg" />
            <span>Example long title goes here</span>
        </li>
        <li id="item7">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Example Title 1</span>
        </li>
        <li id="item8">
            <img src="http://www.stevegoslingphotography.co.uk/images/general/steve_gosling_photography.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
    </ul>
</div>
<div class="carousel-nav">
    <ul>
        <li><a href="#prev">Previous</a></li>
        <li><a href="#item5">Item 5</a></li>
        <li><a href="#item6">Item 6</a></li>
        <li><a href="#item7">Item 7</a></li>
        <li><a href="#item8">Item 8</a></li>
        <li><a href="#next">Next</a></li>
    </ul>
</div>

和css：

.carousel-nav {
    padding: 5px;
    background-color: grey;
}

.carousel-nav li {
    display: inline-block;
}

.carousel-full {
    overflow: auto;
    padding: 10px;
}

.carousel-full ul {
    white-space: nowrap;
}

.carousel-full li {
    width: 100%;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.carousel-full img {
    float: left;
}

.carousel-full span {
    clear: left;
    float: left;
}

和javascript：

var current = 0,
    total = document.querySelectorAll('carousel-full li').length;

$('carousel-nav a').click(function () {
    var id = parseInt($(this).attr('href').slice(4));
    if (id) {
        current = id;
    }
});

$('carousel-nav a[href="#next"]').click(function () {
    e.preventDefault();
    if (current < total) {
        current = current + 1;
    } else {
        current = 0;
    }
    window.location.hash = 'item' + current;
});

$('carousel-nav a[href="#prev"]').click(function (e) {
    e.preventDefault();
    if (current > 0) {
        current = current - 1;
    } else {
        current = total;
    }
    window.location.hash = 'item' + current;
});

如何使用缩略图和箭头创建和图像库

1 个答案: