<!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>