CSS幻灯片滑动效果

CSS幻灯片滑动效果简单实现

0.前期准备

• jquery 1.8支持
• html
• css

1.创建幻灯片div

  

  
 " style="width: 615px;height: 308px;"/>
                
 " style="width: 615px;height: 308px;"/>
                
 " style="width: 615px;height: 308px;"/>
        
        

                1
                2
                3
        

一般幻灯片都有一个显示部分(slide-items)和按钮控制部分(slide-controls)

2.幻灯片样式

/*幻灯片展示样式*/
.slide{
    position:relative;
    overflow:hidden;
    width:615px;
    height:308px;
}
/*slide-items样式*/
.slide-items{
    position:absolute;
    width:1845px;
}
/*slide中item内容div样式*/
.slide-items div{
    float:left;
}
/*按钮框样式*/
.slide-controls{
    width:615px;
    position:absolute;
    bottom:3px;
    text-align:right;
}

/*按钮样式*/
.slide-controls span{
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    display: inline-block;
    color: #fff;
    background: #999999;
    text-align: center;
    cursor: pointer;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}

/*当前显示按钮样式*/
.slide-controls .curr {
    background: #e3006b;
}

样式根据风格修改

3.jquery显示控制

$(function(){
    //切换速率
    var SLIDE_SPEED = 4000;
    var ci = setInterval(autoChangeItem,SLIDE_SPEED);
    //当鼠标移动到按钮时，切换显示图片并改变控制按钮样式
    $('.slide-controls span').hover(function() {
        clearInterval(ci);
        slideItem(this);
    },function(){
        ci = setInterval(autoChangeItem,SLIDE_SPEED);
    });

})

//切换slide图片
function slideItem(obj){
    var index = $(obj).index();
    $('.slide-items').animate({left:-615*index});
    $('.slide-controls span').removeClass('curr');
    $(obj).addClass('curr');
}

//自动切换slide图片函数
function autoChangeItem(){
    //获取按钮个数，用于切换index判断，防止溢出
    var length = $('.slide-controls').children().length;
    //获取当前显示按钮index
    var currIndex = $('.slide-controls span.curr').index();
    //如果显示最后一个则从index：0开始
    var changeItem;
    if(currIndex==(length-1)){
        changeItem=$('.slide-controls span').first();
    }else{
        changeItem=$('.slide-controls span.curr').next();
    }
    slideItem(changeItem);
}