焦点图

效果图:

html

<div class="picfocus" id='player'>
<p class="play-list">
<a href="#" target="_blank"><img src="http://gkcx.eol.cn/upload/2016110808572811115835009313.jpg" alt="家庭尽责的格局和思路来研究制定1" /></a>
<a href="#" target="_blank"><img src="http://gkcx.eol.cn/upload/2016081614030919821452594942.jpg" alt="家庭尽责的格局和思路来研究制定2" /></a>
<a href="#" target="_blank"><img src="http://gkcx.eol.cn/upload/201611080857049239770680633.jpg" alt="家庭尽责的格局和思路来研究制定3" /></a>
</p>
</div>

css

/*定义焦点图容器*/
#player {width:312px;height:228px;background: #ccc;}
.play-list a img{width:312px;height:228px;}
.picfocus {width:auto;height:auto;overflow:hidden;position:relative;}
.play-list a{ display:block;position:absolute;overflow:hidden;width:100%;height:100%;}
/*定义图像说明文字背景*/
.play-bg{position:absolute;bottom:0;background-color:#000;margin-bottom:0px;height:40px;width:100%;filter: Alpha(Opacity=70);opacity:0.7;z-index:1000}
.play-info{position:absolute;bottom:0px;right:0px;padding:0px;height:40px;line-height:40px;width:96%;color:#fff;z-index:1001;cursor:pointer;font-size:14px; display:block;font-weight:normal}
/*定义按钮区域位置*/
.play-text {position:absolute;bottom:0; right:0;height:34px;z-index:1002;margin:0}
.play-text ul {list-style-type:none;height:40px;display:block;_padding-top:0px; z-index:1003;margin:0}
.play-text ul li{width:18px;height:18px;float:left;font-family:'Arial Black';background-color:#927a76;display:block;color:#FFF;text-align:center;margin-left:1px;cursor:pointer;font-family:Arial;font-size:12px;margin-top:6px;list-style:none;padding:0;background-image:none;line-height:16px;}
/*定义当前焦点图的按钮颜色*/
.play-text ul li.current {background-color:#ff8000; color:#fff;}
.play-btn {position:absolute;bottom:0;right:0;height:32px;z-index:1002;margin:0}
.play-btn ul {list-style-type:none; height:25px;display:block;_padding-top:0px;z-index:1003;margin:0}
.play-btn ul li{width:16px; height:13px;float:left;font-family:'Arial';background-color:#FF9D24;display:block;color:#FFF;text-align:center;margin-left:1px;cursor:pointer;font-size:11px;margin-top:9px; line-height:16px;}
/*定义当前焦点图的按钮颜色*/
.play-btn ul li.current {background-color:red;color:#fff;}

js

<script type="text/javascript" src="http://www.eol.cn/js/common/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.eol.cn/js/common/plugin/picfocus.min.js"></script>
<script type="text/javascript">
$(function(){
// 焦点图
$('#player').eolPicFocus({});
})
</script>

插件配置

1.拷贝对应html,css,js代码到页面中,js写在页面最底部
2.插件配置:

$('#player').eolPicFocus({
slideBg:'play-bg', // 说明文字默认背景默认为play-bg
slideInfo:'play-info', //说明性文字默认为play-info
slideText:'play-text', //数字和点默认为play-text
timer:2000, // 每次间隔时长
btnNum: true, // 是否有数字,默认有
infoText: true // 是否有文字性说明,默认有
});

3.增删图片只需要在html中增删对应html代码

<a href="#" target="_blank"><img src="http://gkcx.eol.cn/upload/201611080857049239770680633.jpg" alt="家庭尽责的格局和思路来研究制定3" /></a>

4.如果一个页面有多个焦点图,修改id名,并再次调用插件