标签：首页焦点图
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>首页焦点图</title>
<link rel="stylesheet" href="http://css2.pingan.com/app_css/4008000000/v10/base.css"/>
<link rel="stylesheet" href="http://css2.pingan.com/app_css/4008000000/v10/public.css"/>
<style type="text/css">
.index_important{ padding-left:170px; width:1030px; margin:0 auto 10px;}
.index_important_center{ float:left; display:inline; width:58.325243%;}
.focus_pic{width: 600px;height: 301px;overflow: hidden;position: relative;}
.focus_pic_cnt{position: relative;height: 301px;}
.focus_pic_cnt ul{position: absolute;width: 9999px;}
.focus_pic_cnt li{float: left;width: 600px;}
.focus_pic_text{position: absolute;left: 0;bottom: 0;width: 100%;}
.focus_pic_text ul{ height:28px;width: 9999px;background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);}
.focus_pic_text li{float: left;width: 20%;text-align: center;line-height: 28px;color: #FFF;cursor: pointer;}
.focus_pic_text li.current{position: relative;background:#FF8533;}
.focus_pic_text li.current i{position: absolute;top: -6px;left: 50%;margin-left: -3px;width:0;height:0;overflow:hidden;vertical-align:middle;border-width:0 6px 6px 6px;border-color:transparent transparent #ff8533 transparent;border-style:none dashed solid dashed;}
.focus_pic_btn {display:block;height:40px;position:absolute;top:132px;z-index: 2; padding:0 10px; text-align:center;font: 12px/40px Simsun;color:#fff;background-color:#000;filter:Alpha(opacity=60);opacity:0.6;}
.focus_pic_btn:hover {color: #fff; text-decoration:none;filter:Alpha(opacity=80);opacity:0.8;}
.focus_btn_left {left:0;}
.focus_btn_right {right:0;}
</style>
<script type="text/javascript" src="http://script2.pingan.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="index_important c">
<div class="index_important_center">
<div class="focus_pic">
<a href="javascript:;" class="focus_pic_btn focus_btn_left" style="display:none"><b><</b></a>
<a href="javascript:;" class="focus_pic_btn focus_btn_right" style="display:none"><b>></b></a>
<div class="focus_pic_cnt">
<ul class="c" id="focusPicul">
<li><iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY13111409550903" frameborder="no" scrolling="no" marginWidth="0" marginHeight="0" allowtransparency="true" width="600" height="301"></iframe></li>
</ul>
</div>
<div class="focus_pic_text">
<ul>
<li class="current"><i></i>世界杯车险也狂欢</li>
<li><i></i>全家共用保额</li>
<li><i></i>优惠且享且珍惜</li>
<li><i></i>重大疾病保险</li>
<li><i></i>境外旅游保险</li>
<li><i></i>早买早优惠</li>
<li><i></i>“车+意”优惠套餐</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/* 焦点图 */
var flashPic = function() {
var index = 0, w = $(‘.focus_pic‘).width(), timer = null, time = 5000, speed = 400,
$div = $(‘.focus_pic‘),
$pic = $div.find(‘.focus_pic_cnt‘),
$textUl = $(‘.focus_pic_text > ul‘),
$btn = $div.find(‘.focus_pic_btn‘),
$texts = $textUl.children(‘li‘),
count = $texts.length;
$textUl.width(w/5*count);
$texts.width(100/count+‘%‘);
var twd = w; // 标签移动的left值
var tuiWd = $textUl.find(‘li‘).outerWidth(true); // 单个标签的宽度
var maxuiLeft = (count%5) * tuiWd; // 标签移动的最大left值
timer = setInterval(function() {
index = index === count - 1 ? 0 : index + 1;
// 判断当前数量是否为5的倍数
if(count%5!= 0){
twd = (index-4) * tuiWd;
}else{
twd = w;
}
auto();
}, time);
$texts.bind({
‘mouseover‘: function() {
clearInterval(timer);
index = $(this).index();
auto();
timer = setInterval(function() {
index = index === count - 1 ? 0 : index + 1;
auto();
}, time);
}
});
$btn.bind({
‘click‘: function() {
clearInterval(timer);
if ($(this).hasClass(‘focus_btn_right‘)) {
index = index === count - 1 ? 0 : index + 1;
} else {
index = index === 0 ? count - 1 : index - 1;
}
// 判断当前数量是否为5的倍数
if(count%5!= 0){
twd = (index-4) * tuiWd;
}else{
twd = w;
}
auto();
timer = setInterval(function() {
index = index === count - 1 ? 0 : index + 1;
auto();
}, time);
}
});
$div.hover(function() {
$btn.show();
}, function() {
$btn.hide();
});
function auto() {
// 判断当前数量是否为5的倍数
if(count%5!= 0){
twd = (index-4) * tuiWd;
}else{
twd = w;
}
if (index > 4) {
$textUl.stop().animate({‘margin-left‘:‘-‘+twd},speed);
} else {
$textUl.stop().animate({‘margin-left‘:‘0‘},speed);
}
var target = - index * w;
$texts.eq(index).addClass(‘current‘).siblings().removeClass(‘current‘);
$pic.stop().animate({‘margin-left‘: target}, speed);
}
};
window.onload = function(){
var fp = $(‘#focusPicul‘), adr = [‘QY13111410463825‘,‘QY13111410184719‘,‘QY13111409462701‘,‘QY13121914231238‘,‘QY13122314213243‘,‘QY13122315012148‘];
$.each(adr, function(a,b){
fp.append(‘<li><iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=‘ + b + ‘" frameborder="no" scrolling="no" marginWidth="0" marginHeight="0" allowtransparency="true" width="600" height="301"></iframe></li>‘);
});
flashPic();
};
</script>
</body>
</html>
标签：首页焦点图
原文地址：http://iicoo.blog.51cto.com/10739372/1736903
