CSS幻灯片滑动效果

最新推荐文章于 2025-05-17 10:52:51 发布

Carl_Jia_

最新推荐文章于 2025-05-17 10:52:51 发布

阅读量714

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/carl_jl/article/details/30059345

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS和jQuery实现简单的幻灯片滑动效果，包括创建幻灯片div、设置样式以及使用jQuery进行显示控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

0.前期准备

jquery 1.8支持
html
css

1.创建幻灯片div

<div class="slide">
  <div class="slide-items">
  <div><img src="<c:url value="http://img11.360buyimg.com/da/g17/M00/00/04/rBEbSlNwLw4IAAAAAAD57iM5f2MAAAO3gLqIjUAAPoG747.jpg"/> " style="width: 615px;height: 308px;"/></div>
                <div><img src="<c:url value="/resources/images/test.jpg"/> " style="width: 615px;height: 308px;"/></div>
                <div><img src="<c:url value="/resources/images/test.jpg"/> " style="width: 615px;height: 308px;"/></div>
        </div>
        <div class="slide-controls">
                <span class="curr">1</span>
                <span>2</span>
                <span>3</span>
        </div>
</div>

一般幻灯片都有一个显示部分(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);
}