简单HTML、CSS、JS实现的banner横幅轮播效果

直接上代码吧

index.html

    

    	
        

       		
            

            

            

            

            

            

        

        

            
1
            
2
            
3
            
4
            
5
            
6
        
    
        

index.js

function imageAutoChange() {
    /*获取图片和索引的数组对象*/
    var $imgs = $("#main_div_img li");
    var $nums = $("#main_div_num li");

    var isStop = false;
    var index = 0;

    $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
    $imgs.eq(index).show();

    /*鼠标悬停在数字上的事件处理*/
    $nums.mouseover(function() {
        isStop = true;
        /*先把数字的背景改了*/
        $(this).addClass("numsover").siblings().removeClass("numsover");

        /*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作处理*/
        index = $nums.index(this);
        $imgs.eq(index).show("slow");
        $imgs.eq(index).siblings().hide("slow");
    }).mouseout(function() {
        isStop = false
    });
    /*设置循环*/
    setInterval(function() {
        if(isStop) return;
        if(index >= 6) index = -1;
        index++;

        $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
        $imgs.eq(index).show("slow").siblings().hide("slow");

    }, 2000);



}

style.css

#main_div{  
    width:100%;  
    height:600px;  
    position:absolute;  
}  
/*取消小圆点*/  
#main_div li{  
    list-style:none;  
}  
#main_div_img {  
	margin:0; 
	padding: 0px;
}  

#main_div_img li{  
    display:none; 
	margin:0; 
	padding: 0px;
}  

/*角落显示数字的ul*/  
#main_div_num{  
    overflow:hidden;  
    position:absolute;  
    bottom:10px;  
    right:10px;  
    color:#FFF;  
}  
/*数字的浮动*/  
#main_div_num li{  
    border:#FFF solid 1px;  
    float:left;  
    margin:0px 5px;  
    padding:3px 10px;  
}  
.numsover{  
    background-color:#F08080;  
    color:#F00;  
}  

.numsout{} 

执行效果