图像库没有大拇指

问题描述：

我想创建一个jQuery图像库（我宁愿创建一个，比使用插件）我看了几个不同的教程和选择器，其中每个使用大拇指。现在我当前的代码是这样的：图像库没有大拇指

$(document).ready(function(){ 
    $('img').click(function(){ 
    $(this).clone().appendTo('#imageViewer').css({"opacity":1,"height":"50%"}); 
    }) 
});

的问题，我认为，在单击另一个图像时，我不能没有图像。有没有反正只是使用常规图像，但使用CSS缩小它们，即>高度：20％;不透明度：0.2;但点击后，它们会显示在页面上的div> height：50％;不透明度：1;

答

看到DEMO

HTML

<div id="content"> 
    <div id="mainImg"><img src="http://youchew.net/wiki/images/9/9c/One.png" /></div> 
    <div id="allImg"> 
    <img src="http://youchew.net/wiki/images/9/9c/One.png" > 
    <img src="http://seo-hacker.com/wp-content/uploads/2010/04/22.png" > 
    <img src="http://webtrafficnews.com/wp-content/uploads/2012/03/3.png" > 

    </div> 
    </div>

CSS

#content {width:300px;border:solid 1px #f00;overflow:auto; margin:0 auto;} 
#allImg {} 
#allImg img{ float:left; width:30%;opacity:.5; cursor:pointer; margin:5px}

jQuery的

$(function(){ 

    $("#allImg").on("click","img",function(){ 
    $("#mainImg img").prop("src",$(this).prop("src")); 

    }); 

});

编辑：

Updated slideDemo

CSS

#mainImg {width:300px; height:300px;}

jQuery的

$("#allImg").on("click","img",function(){ 
    newImage = $(this); 
    $("#mainImg img").slideUp(500,function() 
     { 
     $("#mainImg img").prop("src",newImage.prop("src")); 

     $("#mainImg img").slideDown(500); 
     }); 

    });

你可以添加任何你想要的动画 – Champ

你将如何添加动画即幻灯片？ – user1720424

请参阅updateDemo – Champ

答

尝试把所有的图像放在包装div中。将div设置为“position：relative”，将图像设置为“position：absolute; top：0; left：0”。

然后，JavaScript的：

var galleryImages = $('#galleryWrapper').find('img'); 
var firstImage = galleryImages.first(), lastImage = galleryImages.last(); 
var currentImage=firstImage; 

//hide all images but the first 
firstImage.siblings().hide(); 

galleryImages.click(function(){ 
    //hide the current image 
    currentImage.hide(); 

    //if not last image, show the next 
    if (currentImage!=lastImage){ 
     currentImage=currentImage.next(); 
     currentImage.show(); 
    } 

    //if last image, go back to the first 
    else { 
     currentImage=firstImage; 
     currentImage.show(); 
    } 
});

大小在CSS的图像无论你请。

图像库没有大拇指

相关推荐