图片轮播2-优快云博客

本文链接：https://blog.youkuaiyun.com/wangqiuchen_Study/article/details/70170045

本文介绍了一种使用HTML、CSS及jQuery实现的焦点图轮播效果，包括样式定义、图片切换逻辑及标题显示等内容。通过提供的代码示例，读者可以了解到如何创建一个具有平滑过渡效果的焦点图轮播组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
})


效果