图片灼步滚动
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 * { margin: 0; padding: 0; border: 0; } 8 .pic_jd { position: relative; margin: 0 auto; width: 959px; border-bottom: 1px #ccc solid; padding-bottom: 20px; margin-bottom: 20px; } 9 .pic_jd .prev, .pic_jd .next { position: absolute; display: block; width: 43px; height: 86px; top: 0; margin-top: 180px; } 10 .pic_jd .prev { left: 0; z-index: 1; cursor: pointer; background-image: url(images/prev.png); } 11 .pic_jd .next { right: 0px; z-index: 1; cursor: pointer; background-image: url(images/next.png); } 12 .img-list { position: relative; width: 959px; height: 478px; overflow: hidden } 13 .img-list ul { width: 9999px; } 14 .img-list li { float: left; display: inline; width: 236px; margin-right: 5px; height: 478px; } 15 .img-list li .tit_bg { width: 143px; height: 52px; background-color: #000; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; position: relative; top: -70px; overflow: hidden; z-index: 100; } 16 .img-list li .tit { width: 143px; height: 52px; position: relative; top: -120px; padding-left: 10px; font-size: 14px; color: #fff; z-index: 101; } 17 .img-list li .tit p { font-size: 20px; } 18 </style> 19 <script src="http://code.jquery.com/jquery-latest.min.js"></script> 20 </head> 21 22 <body> 23 <div class="pic_jd"> <span class="prev"></span> <span class="next"></span> 24 <div class="img-list"> 25 <ul> 26 <li><a href="#" target="_blank"><img title="" alt="" src="images/91206625.jpg" width="236" height="478"></a> 27 <div class="tit_bg"></div> 28 <div class="tit"> 29 <p>李梦美</p> 30 演绎都市质感美唇 </div> 31 </li> 32 <li><a href="#" target="_blank"><img title=" " alt="" src="images/91205447.jpg" width="236" height="478"></a> 33 <div class="tit_bg"></div> 34 <div class="tit">苗圃 35 <p></p> 36 从容优雅淡定花丛中 </div> 37 </li> 38 <li><a href="#" target="_blank"><img alt="" src="images/91205452.jpg" width="236" height="478"></a> 39 <div class="tit_bg"></div> 40 <div class="tit"> 41 <p>陈晓</p> 42 帅气俊朗展阳光魅力 </div> 43 </li> 44 <li><a href="#" target="_blank"><img alt="" src="images/91205456.jpg" width="236" height="478"></a> 45 <div class="tit_bg"></div> 46 <div class="tit"> 47 <p>刘嘉玲</p> 48 尽显高贵气质 </div> 49 </li> 50 <li><a href="#" target="_blank"><img title="" alt="" src="images/91206627.jpg" width="236" height="478"></a> 51 <div class="tit_bg"></div> 52 <div class="tit"> 53 <p>刘洲成</p> 54 半裸性感爆棚 </div> 55 </li> 56 </ul> 57 </div> 58 <script type="text/javascript"> 59 function DY_scroll(wraper, prev, next, img, speed, or) { 60 var wraper = $(wraper); 61 var prev = $(prev); 62 var next = $(next); 63 var img = $(img).find('ul'); 64 var w = img.find('li').outerWidth(true); 65 var s = speed; 66 next.click(function () { 67 img.animate({'margin-left': -w}, function () { 68 img.find('li').eq(0).appendTo(img); 69 img.css({'margin-left': 0}); 70 }); 71 }); 72 prev.click(function () { 73 img.find('li:last').prependTo(img); 74 img.css({'margin-left': -w}); 75 img.animate({'margin-left': 0}); 76 }); 77 if (or == true) { 78 ad = setInterval(function () { 79 next.click(); 80 }, s * 2000); 81 wraper.hover(function () { 82 clearInterval(ad); 83 }, function () { 84 ad = setInterval(function () { 85 next.click(); 86 }, s * 1000); 87 }); 88 89 } 90 } 91 DY_scroll('.pic_jd', '.prev', '.next', '.img-list', 3, true);// true为自动播放，不加此参数或false就默认不自动 92 </script> 93 </div> 94 </body> 95 </html>优质内容筛选与推荐>>
1、IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
2、代码在通讯录中插入测试联系人
3、团队任务三 例会
4、MySQL 系列（四） 主从复制、读写分离、模拟宕机、备份恢复方案生产环境实战
5、epoll 实现回射服务器