轮播图_www.

*{margin:0; padding:0;}
body{min-width:320px; font-size:12px;}
h1{font-size:18px;}
h2{font-size:14px}
h4{font-size:12px;}
p{ word-break:break-all; line-height:24px;}
ul,ul li,ol,ol li{list-style:none;}
a{text-decoration:none;}
.clear{clear:both;}
.clearfix:after{ display:block; clear:both; content:"."; visibility:hidden; height:0px;}

#pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;}
.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;}
.lunbo_pic li{ float:left; overflow:hidden;}
.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;}
.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; }
.lunbo_curso a{ background:url(/images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;}
.lunbo_curso .small_xz{ color:#F0F;}
.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;}
#arr_l{ left:0; background:#CCC;}
#arr_r{ right:0; background:#CCC;}
.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;}

var b_width = 1000; // 大图的宽度
var speed = 500; // 图片向左移动速度
var s_time = 3000 //图片自动滚动速度
var pic_li = $("#lunbo_pic").children("li");
$(document).ready(function(e) {
var $ul_width= pic_li.width() * pic_li.length; //轮播图的宽度
$("#lunbo_pic").width($ul_width);
var small_width = $(".lunbo_curso>a").width() * $(".lunbo_curso>a").length;
$(".lunbo_curso").width(small_width);
$(".lunbo_curso").css("margin-left",-small_width/2);
});
$(document).live("click",function(e){
$target = $(e.target);
var id = $target.attr('id');
if($target.is("a") && $target.parent($("#lunbo_curso")) ){
$target.addClass("small_xz").siblings().removeClass('small_xz');
var mar_lf = parseInt($target.index() * b_width);
$("#lunbo_pic").animate({
left : -mar_lf
},speed);
}
if(id == "arr_l"){
prePage();
}
if(id == "arr_r"){
nextPage();
}
});
//上一个
function prePage(){
if($(".small_xz").index() == 0){
$("#lunbo_pic").css("left",-4000);
$("#lunbo_pic").animate({
"left": -parseInt(pic_li.length *b_width - b_width)
},speed);
$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz");
$(".small_xz").index() == pic_li.length - 1;
}else{
$("#lunbo_curso>a").eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz");
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_width;
$("#lunbo_pic").animate({
"left": mar_lf2
},speed);
}
}
//下一个
function nextPage(){
if($(".small_xz").index() == pic_li.length -1){
$("#lunbo_pic").css("left",0);
/*$("#lunbo_pic").animate({
"left": 0
},speed);*/
$("#lunbo_curso>a").eq(0).addClass("small_xz").siblings().removeClass("small_xz");
$(".small_xz").index() == 0;

}else{

$("#lunbo_curso>a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz");
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width;
$("#lunbo_pic").animate({
"left": mar_lf2
},speed);
}
}

function picRun(){
nextPage();
}
intervalTime = setInterval(picRun,s_time);

$("#pic_carousel").on("mouseover",function(){
clearInterval(intervalTime);
});
$("#pic_carousel").on("mouseout",function(){
intervalTime = setInterval(picRun,s_time);;
});