图片轮播2

http://ucheke.jrj.com.cn/--参考页面 <script src="http://js.jrjimg.cn/lib/jquery-1.7.min.js"></script> <script src="http://js.jrjimg.cn/lib/ui/focuspic-min.js"></script>--在资源中 样式/*焦点图*/ .focusimg a,.focusimg a:hover{color:#000;text-decoration:none;} .focusimg{width:486px;height:320px;position:relative;color:#999;background: none repeat scroll 0 0 #FFFFFF;font:12px/24px "宋体";} .focusimg .bigpic{width:486px;height:320px;z-index:1;filter:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );} .focusimg .titlebg{width:486px;height:60px;bottom:0;left:0;background:url(http://i0.jrjimg.cn/car/v2017/pngbg.png) repeat;position:absolute;} .focusimg .titlebox{height:40px;position:absolute;bottom:20px;left:0;width:400px;z-index:999} .focusimg .titlebox ul{padding:0;} .focusimg .titlebox li{background:none;text-align:center;height:40px;line-height:40px;color:#fff;font-family:"微软雅黑";font-size:20px;} .focusimg .titlebox li a,.focusimg .titlebox li a:visited,.focusimg .titlebox li a:hover{color:#fff;} .focusimg .btnum{height:4px;position:absolute; bottom: 23px; right: 44px;width:400px;z-index:1000;} .focusimg .picnums{width:100%;text-align:center;} .focusimg .picnums p{cursor:pointer;width:48px;height:4px;overflow:hidden;display:inline-block;line-height:0;background:url(http://i0.jrjimg.cn/car/v2017/topdb.png) no-repeat 0 -4px;margin:0 1px;} .focusimg .picnums .on{background-position:0 0;} .focusimg .dis{display:block;} .focusimg .undis{display:none;} HTML<!--焦点图--> <div class="focusimg"> <div id="Big_Pics1" class="bigpic"> <div class="dis"><a href="#" target="_blank"><img src="http://i0.jrjimg.cn/focus/2017/shczV2017/pic.png" border="0" width="486" height="320" alt="焦点图1" title="" /></a></div> <div class="undis"><a href="#" target="_blank"><img src="http://i0.jrjimg.cn/focus/2017/shczV2017/pic.png" border="0" width="486" height="320" alt="焦点图2" title="" /></a></div> <div class="undis"><a href="#" target="_blank"><img src="http://i0.jrjimg.cn/focus/2017/shczV2017/pic.png" border="0" width="486" height="320" alt="焦点图3" title="" /></a></div> <div class="undis"><a href=#" target="_blank"><img src="http://i0.jrjimg.cn/focus/2017/shczV2017/pic.png" border="0" width="486" height="320" alt="焦点图4" title="" /></a></div> </div> <div class="btnum"><div id="Pic_Nums1" class="picnums"><p class="on"></p><p></p><p></p><p></p></div></div> <div class="titlebg"></div> <div id="Titles1" class="titlebox ff"> <ul class="dis"><li><a href="#" target="_blank">重量级国货选手 4款大空间7座自主SUV</a></li> </ul> <ul class="undis"><li><a href="#" target="_blank">省购置税/越贵越值 5款小排量豪华品牌SUV</a></li> </ul> <ul class="undis"><li><a href="#" target="_blank">选择更多样 丰田YARiS L致享对起亚K2</a></li> </ul> <ul class="undis"><li><a href="#" target="_blank">奇瑞内部技术发布会爆出哪些“黑科技”？</a></li> </ul> </div> </div> js$(document).ready(function(){ //图片轮播 var focusPic = new FocusPics({bigPicId: "Big_Pics1", numId: "Pic_Nums1", titleId: "Titles1"}); focusPic.init(3000); }) 效果