个人博客—轮播器

个人博客—轮播器

• 轮播器自动轮播，每张图片淡入淡出
• 控制按钮和图片描述跟随图片轮播
• 鼠标悬停图片上方则停止轮播，滑出后从当前图片继续轮播
• 鼠标滑到控制器上方则对应图片显示，且停止轮播，滑出后从当前图片继续轮播

轮播器

html部分

js部分

    var cur_index = 0, //当前控制按钮
        img_list = $("#banner img"), //图片组
        img_list_length = img_list.length,
        control_list = $("#banner ul li"); //控制组
    $('#banner strong').html($(img_list).first().attr('alt'));
    $(img_list).fadeOut();
    banner_to(cur_index);
    // 定时器每3秒自动变换一次banner
    var banner_timer = setInterval(function(){ 
        if(cur_index < img_list_length -1){ 
            cur_index ++; 
        }else{ 
            cur_index = 0;
        }
        //调用变换处理函数
        banner_to(cur_index); 
    },3000);
    //调用控制按钮点击和鼠标悬浮事件处理函数
    addEvent(); 
    function addEvent(){
        for(var i=0;i

代码在Github：个人博客