<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>自动播放,鼠标触发排序切换JS焦点轮播图(不带左右箭头切换)</title>
<style type="text/css">
*{margin: 0; padding: 0;}
ol, ul, li {list-style: none;}
.home_main{width:1000px;margin-left:auto;margin-right:auto; background-color:#FFF;}
.home_main_topbox{ padding-top:10px; zoom:1;}
.home_banner{margin:0 0 0 230px;position:relative;width:770px;height:290px;overflow:hidden;}
.home_banner_img{position:absolute;width:3080px;}
.home_banner_img li{float:left;}
.home_banner_num{position:absolute;bottom:14px;right:17px;}
.home_banner_num li{float:left;margin-left:7px;width:20px;height:20px;border-radius:10px;background:#999;text-align:center;color:#FFF;font:12px/20px Arial;cursor:pointer;}
.home_banner_num li.home_banner_num_current{background:#E23B41;}
</style>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="home_main">
<div class="home_banner">
<ul class="home_banner_img c">
<li style="display:block"><a href="#" target="_blank" otype="title" otitle="" title=""><img src="home_banner1.jpg" width="770" height="290" alt="鸿运英才" /></a></li>
<li><a href="#" target="_blank" otype="title" otitle="" title=""><img src="home_banner2.jpg" width="770" height="290" alt="馨逸人生" /></a></li>
<li><a href="#" target="_blank" otype="title" otitle="" title=""><img src="home_banner3.jpg" width="770" height="290" alt="安康无忧" /></a></li>
<li><a href="#" target="_blank" otype="title" otitle="" title=""><img src="home_banner4.jpg" width="770" height="290" alt="倍保安行" /></a></li>
</ul>
<ul class="home_banner_num"><li class="home_banner_num_current">1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
</div>
<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">
/* 焦点图 */
(function() {
var index = 0, w = 770, timer = null, time = 5000, speed = 400;
timer = setInterval(auto, time);
$('.home_banner_num > li').hover(function() {
clearInterval(timer);
var $this = $(this), $cont = $this.parent().prev(), target;
index = $this.index();
target = - index * w;
$this.addClass('home_banner_num_current').siblings().removeClass('home_banner_num_current');
$cont.stop().animate({left: target}, speed);
timer = setInterval(auto, time);
});
function auto() {
index = index === 3 ? 0 : index + 1;
var $cont = $('.home_banner_img'), target = - index * w;
$('.home_banner_num > li').eq(index).addClass('home_banner_num_current').siblings().removeClass('home_banner_num_current');
$cont.stop().animate({left: target}, speed);
}
}());
</script>
</body>
</html>