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

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 个解决方案

解决方案1
0 2013-12-16 17:34:39

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

问题描述

1 个解决方案

解决方案1 0 2013-12-16 17:34:39

解决方案1
0 2013-12-16 17:34:39