下载: http://sc.chinaz.com/jiaoben/151204445580.htm
效果: 
html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>jQuery焦点图插件PicCarousel</title> 8 <link rel="stylesheet" href="css/style.css"> 9 <script src="js/jquery-1.11.3.min.js"></script> 10 <script src="js/PicCarousel.js"></script> 11 </head> 12 <body> 13 <div class="container"> 14 <div class="poster-main A_Demo"> 15 <div class="poster-btn poster-prev-btn"></div> 16 <ul class="poster-list"> 17 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 18 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 19 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 20 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 21 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 22 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 23 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 24 </ul> 25 <div class="poster-btn poster-next-btn"></div> 26 </div> 27 <div class="poster-main B_Demo" style="margin-top:100px"> 28 <div class="poster-btn poster-prev-btn"></div> 29 <ul class="poster-list"> 30 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 31 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 32 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 33 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 34 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 35 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 36 <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li> 37 </ul> 38 <div class="poster-btn poster-next-btn"></div> 39 </div> 40 <script> 41 $(".A_Demo").PicCarousel("init"); //静态 42 $(".B_Demo").PicCarousel({ //轮播动态 43 "width":1000, 44 "height":300, 45 "posterWidth":520, 46 "posterHeight":300, 47 "scale":0.9, 48 "speed":500, 49 "autoPlay":true, 50 "delay":1000, 51 "verticalAlign":"top" 52 }); 53 </script> 54 </div> 55 <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;"> 56 <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> 57 </div> 58 </body> 59 </html>
css js 见下载
ok
原文：http://www.cnblogs.com/aiqingqing/p/5041574.html