<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;height:1500px;}
img{border:0;}
/*banner start*/
.banner{width:100%;height:350px;margin-top:px;}
.banner .b_adv{width:1200px;height:50px;margin:0 auto;position:relative;}
.banner .b_adv a{position:absolute;top:0;left:220px;}
.banner .b_bg{height:300px;background:#4a4d9c;z-index:1;}
.banner .b_bg .b_con{width:1200px;height:300px;margin:0 auto;
position:relative;z-index:2;
}
/*focus start*/
.banner .b_bg .b_con .focus{width:760px;height:300px;
position:absolute;left:220px;top:0;z-index:3;overflow:hidden;}
.banner .b_bg .b_con .focus .f_pic{position:relative;}
.banner .b_bg .b_con .focus .f_pic li{list-style:none;}
.banner .b_bg .b_con .focus .f_btn{height:24px;
position:absolute;bottom:10px;left:330px;
/*left:50%;margin-left:-70px;*/
}
.banner .b_bg .b_con .focus .f_btn ul{background:#000;display:inline-block;padding:7px 28px;opacity:0.4;filter:alpha(opacity=40); border-radius:15px;}
.banner .b_bg .b_con .focus .f_btn ul li{width:8px;height:8px;border-radius:10px;border:1px solid #fff;float:left;list-style:none;margin:0 3px;}
.banner .b_bg .b_con .focus .f_btn ul .no{background:#fff;}
.banner .b_bg .b_con .focus .f_ear{width:46px;height:70px;display:block;background:url("images/icon.png") no-repeat;
position:absolute;display:none;
}
.banner .b_bg .b_con .focus:hover .f_ear{display:block;}
.banner .b_bg .b_con .focus .pre{left:10px;top:110px;background-position:-74px 0;}
.banner .b_bg .b_con .focus .pre:hover{background-position:-172px 0;}
.banner .b_bg .b_con .focus .next{right:10px;top:110px;background-position:-123px 0;}
.banner .b_bg .b_con .focus .next:hover{background-position:0 -57px;}
/*end focus*/
.clear{clear:both;}
</style>
<body>
<!--banner start-->
<div class="banner">
<div class="b_bg">
<div class="b_con">
<!--focus start-->
<div class="focus">
<ul class="f_pic">
<li>
<a href="#">
<img src="images/banner-3.jpg" alt="中山学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-1.jpg" alt="中山学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-2.jpg" alt="中山学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-4.jpg" alt="中山学院" width="760" height="300" />
</a>
</li>
<li>
<a href="#">
<img src="images/banner-5.jpg" alt="中山学院" width="760" height="300" />
</a>
</li>
</ul>
<div class="f_btn">
<ul>
<li class="no" data-color="#4E4D9B"></li>
<li data-color="#A136D2"></li>
<li data-color="#6766CE"></li>
<li data-color="#563481"></li>
<li data-color="#009DE4"></li>
</ul>
</div>
<a href="#" class="f_ear pre"></a>
<a href="#" class="f_ear next"></a>
</div>
<!--end focus-->
</div>
</div>
</div>
<!--end banner-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 焦点图切换
var index = 0;
// 轮展图切换
$(".f_btn").find("li").mouseover(function(){
// 控制小按钮
$(this).addClass("no").siblings().removeClass("no");
var _index = $(this).index(); // 获取当前选中的索引
index = _index; // 重新赋值
$(".f_pic").find("li").eq(_index).fadeIn("slow").siblings().hide(); // 联动切换
// 切换背景颜色
var background = $(this).data("color");
$(this).parents(".b_bg").css("background",background);
});
// 下一张
$(".next").click(function(){
index++;
var length = $(".f_pic").find("li").length;
if(index >= length){
index = 0;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(this).parents(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
});
// 上一张
$(".pre").click(function(){
index--;
var length = $(".f_pic").find("li").length;
if(index < 0){
index = length - 1;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(this).parents(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
});
// 自动切换,一般不使用setTimeout只执行一次
setInterval(function(){
index++;
var length = $(".f_pic").find("li").length;
if(index >= length){
index = 0;
}
// 切换背景颜色
var background = $(".f_btn").find("li").eq(index).data("color");
$(".b_bg").css("background",background);
// 联动小按钮
$(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no");
$(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换
},2000);
});
</script>
</body>
