分享幻灯片+在线阅读
分享一个简洁的幻灯片与在线阅读的功能。幻灯片最主要的环节是控制图片的出现与消失。
在线阅读使用第三方的js类库，有放大缩小的功能，需要准备两张不同分辨率的图片，用js使小图片对应大图片得路径。turn.js
幻灯片slider.js：
http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_42ebbd03-98be-4659-9d33-96f4b410bd97" class="cnblogs_code_hide">$(document).ready(function () { $(".ot-slide:eq(0)").fadeIn(200); var slideMax = $(".ot-slide").length; var curSlide = 0; var prevSlide; function doThe(dir){ var nextSlide; /*var cMove;*/ if (dir == 'prev') { if (curSlide == 0) { nextSlide = slideMax-1; } else { nextSlide = curSlide-1; } /*cMove = '100%';*/ } else if (dir == 'next') { if (curSlide + 1 == slideMax) { nextSlide = 0; } else { nextSlide = curSlide+1; } /*cMove = '-100%';*/ } $(".ot-slide").eq(curSlide).fadeOut(300); $(".ot-slide").eq(nextSlide).fadeIn(300); if (nextSlide == 0) { curSlide = 0; } else { curSlide = nextSlide; } } if (2 > $('.ot-slide').length) { $("").hide(); } if ($(".two-c").children("li").length == 1) { $(".two-c").children("li").css({'width':'auto'}); } $("").live('click',function(){ if ($(".ot-slide").length > 1) { if (!$(".ot-slide").is(":animated")) { var direct = $(this).attr('id').split('ot-s-')]; if (direct == 'left') { direct = 'prev'; } else if (direct == 'right') { direct = 'next'; } doThe(direct); } } });});
页:
[1]