我寫的jquery,三組demo一起切換,我想到封裝函數,可是我忘記怎么寫了。?求講師。非常感謝回答者 /鞠躬求貼代碼,或者案例。謝謝啦。$('document').ready(function()?{
????//?設置這些div為JavaScipt瀏覽器顯示
????$('.gallery_data').css('display','block');
????$('.gallery_preview').css('display','block');
????$('.gallery_caption').css('display','block');
????
????//?捕捉縮略圖鏈接
????$('.gallery_thumbnails?a').click(function(e){
????????//?禁用標準鏈接行為
????????e.preventDefault();
????????
????????//?基于鏈接的縮略圖設置變量
????????var?photo_caption?=?$(this).attr('title');
????????var?photo_fullsize?=?$(this).attr('href');
????????var?photo_classify=?$(this).data('classify');?
????????console.log(photo_fullsize);
????????var?photo_preview?=?photo_fullsize.replace("_fullsize",?"_preview");
????????//?淡出預覽,預加載新形象,淡化預覽??imgpreload
????????$('.gallery_caption').slideUp(500);
????????$('.gallery_preview').fadeOut(500,?function(){
????????????$('.gallery_preload_area').html('<img?src="'+photo_preview+'"?/>');
????????????$('.gallery_preload_area?img').imgpreload(function(){
????????????????$('.gallery_preview').html('<a?class="overlayLink"?title="'+photo_caption+'"?data-classify="'+photo_classify+'"?href="'+photo_fullsize+'"?style="background-image:url('+photo_preview+');"></a>');
????????????????$('.gallery_preview').fadeIn(500);
????????????????$('.gallery_caption').html('<a?class="name"?href="'+photo_fullsize+'">'+photo_caption+'</a><p?class="field">'+photo_classify+'</p>');
????????????????$('.gallery_caption').slideDown(500);
????????????????updateThumbnails();
????????????});
????????});
????????$(this).addClass('active').siblings().removeClass('active');
????});
????
????//?設置第一個預覽圖像
????var?first_photo_caption?=?$('.gallery_thumbnails?a').first().attr('title');
????var?first_photo_fullsize?=?$('.gallery_thumbnails?a').first().attr('href');
????var?first_photo_classify?=?$('.gallery_thumbnails?a').first().data('classify');
????var?first_photo_preview?=?first_photo_fullsize.replace("_fullsize",?"_preview");
????$('.gallery_preview').html('<a?class="overlayLink"?title="'+first_photo_caption+'"?data-classify="'+first_photo_classify+'"?href="'+first_photo_fullsize+'"?style="background-image:url('+first_photo_preview+');"></a>');
????$('.gallery_caption').html('<a?class="name"?href="'+first_photo_fullsize+'">'+first_photo_caption+'</a><p?class="field">'+first_photo_classify+'</p>');
????updateThumbnails();
});
function?updateThumbnails(){
????$('.gallery_thumbnails?a').each(function(index){
????????
????????if?(?$('.gallery_preview?a').data('href')?==?$(this).attr('href')?){
????????????$(this).addClass('selected');
????????????$(this).children().fadeTo(250,?.4);
????????}else?{
????????????$(this).removeClass('selected');
????????????$(this).children().css('opacity',?'1');
????????}
????});
????
}
jquery 怎么封裝函數給3組demo使用,點擊時互不影響
班大人
2016-12-04 10:19:32