图片灼步滚动 

 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>

 图片加源码

posted @ 2013-08-28 15:29  海阔天空XM  阅读(201)  评论(0)    收藏  举报