1、CSS样式
1 <style type="text/css"> 2 html,body,.viewer,.viewer .pic-list,.viewer .pic-list li { width:100%; height:100%; vertical-align:middle;} 3 .viewer { position:relative; overflow:hidden;} 4 .viewer .bar { display:none; width:100%; height:28px; line-height:18px; background:#000; position:absolute; bottom:0; left:0; z-index:998;} 5 .viewer .bar td { padding:5px 10px;} 6 .viewer .bar a { color:#fff;} 7 .viewer .list { overflow:hidden;} 8 .viewer .list li { list-style:none; display:none; overflow:hidden; text-align:center; vertical-align:middle;} 9 .viewer .list li img { vertical-align:middle;} 10 .viewer a.arrow { display:none; width:52px; height:42px; line-height:42px; text-align:center; overflow:hidden; color:#fff; background:#000; position:absolute; top:50%; margin-top:-30px; z-index:999;} 11 .viewer a.prev { left:0;} 12 .viewer a.next { right:0;} 13 </style>
2、HTML
1 <div class="viewer"> 2 <ul class="list" data="1"> 3 <li><img src="images/temp/banner_1.jpg" alt="图片" /></li> 4 <li><img src="images/temp/banner_2.jpg" alt="图片" /></li> 5 <li><img src="images/temp/banner_3.jpg" alt="图片" /></li> 6 <li><img src="images/temp/banner_4.jpg" alt="图片" /></li> 7 <li><img src="images/temp/banner_5.jpg" alt="图片" /></li> 8 </ul> 9 <div class="bar"> 10 <table width="100%"> 11 <tr> 12 <td align="left"><a href="javascript:void(0)" class="bar-prev">上一作品集</a></td> 13 <td align="center"><a href="javascript:void(0)" target="_blank" class="bar-view">查看原图</a></td> 14 <td align="right"><a href="javascript:void(0)" class="bar-next">下一作品集</a></td> 15 </tr> 16 </table> 17 </div> 18 <a href="javascript:Viewer.prev()" class="arrow prev">上一张</a> 19 <a href="javascript:Viewer.next()" class="arrow next">下一张</a> 20 </div>
3、Javascript
1 <script type="text/javascript"> 2 $(function () { 3 Viewer.init(); 4 }); 5 var Viewer = { 6 wrap: $(‘.viewer‘), 7 listWrap: $(‘.list‘), 8 list: $(‘.list li‘), 9 nums: $(‘.list li‘).length, 10 barview: $(‘.bar-view‘), 11 showbar: true, 12 init: function () {//初始化 13 Viewer.show(1); 14 }, 15 show: function (index) {//显示索引项 16 if (Viewer.nums == 0) { 17 Viewer.error(); 18 } 19 var e = Viewer.list.first(); 20 var p = Viewer.wrap.find(‘a.prev‘); 21 var n = Viewer.wrap.find(‘a.next‘); 22 if (index < 2) {//显示第一项 23 index = 1; 24 e = Viewer.list.first(); 25 p.css({ left: -100 }); 26 n.css({ right: 0 }); 27 } else if (index >= Viewer.nums) {//显示最后一项 28 index = Viewer.nums; 29 e = Viewer.list.last(); 30 p.css({ left: 0 }); 31 n.css({ right: -100 }); 32 } 33 else {//显示当前项 34 p.css({ left: 0 }); 35 n.css({ right: 0 }); 36 e = Viewer.list.eq(index - 1); 37 } 38 e.fadeIn().siblings().fadeOut(); 39 Viewer.listWrap.attr(‘data‘, index); 40 Viewer.barview.attr(‘href‘, e.find(‘img‘).attr(‘src‘)); 41 var m = Viewer.wrap.find(‘a.arrow‘); 42 var c = Viewer.wrap.find(‘.bar‘); 43 Viewer.wrap.mouseover(function () { 44 m.fadeTo(1, 0.5); 45 if (Viewer.showbar) { 46 c.fadeTo(1, 0.5); 47 } 48 }).mouseleave(function () { 49 m.hide(); 50 c.hide(); 51 }); 52 }, 53 prev: function () {//上一项 54 Viewer.show(parseInt(Viewer.listWrap.attr(‘data‘)) - 1); 55 }, 56 next: function () {//下一项 57 Viewer.show(parseInt(Viewer.listWrap.attr(‘data‘)) + 1); 58 }, 59 error: function () {//错误提示 60 Viewer.listWrap.remove(); 61 Viewer.wrap.append(‘<h5 style=\"text-align:center\">抱歉，出错啦！</h5>‘); 62 return false; 63 } 64 } 65 </script>
4、实现效果