Question

我正在尝试使用jQuery创建一个简单的缩略图查看器。这是代码：

        $(function(){
        $("ul.thumbnails li").click(function(e){
        var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
        });

        <div class="image-gallery">

    <img class="featured" src="big.jpg">

    <ul class="thumbnails">

    <li id="thumb01">
        <a href="big.jpg"><img src="small.jpg"></a>
    </li>
    <li id="thumb02">
        <a href="big.jpg"><img src="small.jpg"></a>
    </li>
    <li id="thumb03">
        <a href="big.jpg"><img src="small.jpg"></a>
    </li>
</ul>

.thumbnails li {
margin: 0;
padding: 5px 5px 0 5px;
list-style: none;
float: left;
overflow: hidden;
}

thumbnails li img {
width: 50px;
height: 50px;
margin: 0;
padding: 0;
float: left;
}

如果我单击缩略图，浏览器将直接转到完整图像，而不是仅使用jQuery更改img src。但是如果我点击<li>里面的某个地方就行了。

我知道这一定很简单，但我不知道我哪里出错了。我曾尝试过研究其他画廊，比如http://www.sohtanaka.com/web-design/examples/image-rotator/，但找不到我错过的画面。

我真的可以使用你们的帮助：）

Answer 1

这是因为您需要在单击链接时停止浏览器转到图像。您可以使用preventDefault函数来停止当前事件操作。在这种情况下，“点击”。

  $(function(){
     $("ul.thumbnails li").click(function(e){
     var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
     var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
     $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)

     e.preventDefault(); //Stop browser default behaviour 

  });

Answer 2

设置新源后，请确保单击函数return false;以防止默认浏览器行为。

坚持使用jQuery缩略图库行为

2 个答案: