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

我正在尝试创建一个图片库，其中包含一个大图像和可以通过滚动查看的小缩略图。我希望能够以两种方式在中间改变图片：（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部分工作正常。所以我的问题是如何将两个零件组合在一起，以便它们一起正确工作？

来源

2013-12-16 oliveirano25

你能在捣鼓这[jsffiddle.net]（http://jsfiddle.net） –

是的，我试着拨弄，但我得到了相同的结果 – oliveirano25

您可以使用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; 
});

来源

2013-12-16 17:34:39

感谢您的答复，但我不知道你的设计是我在找什么。我想创建这样的东西，但缩略图垂直放置不水平：http://tympanus.net/Tutorials/ResponsiveImageGallery/ – oliveirano25

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

回答

相关问题