JS+CSS实现幻灯片_css js ppt 动画-CSDN博客

本文链接：https://blog.csdn.net/nieyongs/article/details/46969095

本文介绍了如何使用JavaScript和CSS实现酷炫的幻灯片照片特效。通过jQuery实现动态切换，结合HTML和CSS进行结构布局，详细讲解了从html结构到CSS样式表，再到JS实现幻灯片的切换过程。

摘要由CSDN通过智能技术生成

幻灯片照片特效

很多网站以及博客都有这种带幻灯片的特效，看起来非常酷炫。在这个酷炫的特效的背后主要是通过jquery来实现动态切换，以及html和css实现结构布局。下面是动手自己做一个这样的幻灯片。

学习资料

html结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>幻灯片</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/sliders.js"></script>
</head>

<body>
    <div id="wrap">
        <div id="banner">
            <div id="slide-holder">
                <div id="slide-runner">
                    <a href="/" target="_blank"><img src="images/a1.jpg" id="slide-img-1" /></a>
                    <a href="/" target="_blank"><img src="images/a2.jpg" id="slide-img-2" /></a>
                    <a href="/" target="_blank"><img src="images/a3.jpg" id="slide-img-3" /></a>
                    <a href="/" target="_blank"><img src="images/a4.jpg" id="slide-img-4" /></a>
                </div>
                <h2 id="caption">Caption</h2>
                <h3 id="description">description</h3>
                <div id="slide-controls">
                    <button id="slide-next">next</button>
                    <button id="slide-pre">pre</button>
                </div>
            </div>
            <script type="text/javascript">
            if (!window.slider) {
                var slider = {};
            }
            slider.data = [{
                "id": "slide-img-1",
                "caption": "标题1",
                "description": "给点描述吧"
            }, {
                "id": "slide-img-2",
                "caption": "标题2",
                "description": "给点描述吧"
            }, {
                "id": "slide-img-3",
                "caption": "标题3",
                "description": "给点描述吧"
            }, {
                "id": "slide-img-4",
                "caption": "标题4",
                "description": "给点描述吧"
            }];
            </script>
        </div>
    </div>
</body>

</html>

CSS样式表

/* 幻灯片 */

* {
    padding: 0px;
    margin: 0px;
}

#wrap {
    width: 670px;
    position: relative;
    margin: 10px auto;
}

#banner {
    width: 670px;
    height: 280px;
    position: relative;
}

#slide-holder {
    width: 670px;
    height: 280px;
    position: relative;
    overflow: hidden;
}

#slide-runner {
    position: relative;
}

#slide-runner img {
    width: 670px;
    height: 280px;
    position: absolute;
}

#slide-controls {
    width: 670px;
    height: 20px;
    bottom: 0px;
    background-color: red;
    position: absolute;
}

#slide-pre,
#slide-next {
    background-color: red;
    border: 0px;
    height: 20px;
    width: 40px;
}

#slide-pre {
    float: right;
    margin-right: 10px;
}

#slide-next {
    float: right;
}

#slide-img-2 {
    left: 670px;
}

#caption {
    position: absolute;
    left: 100px;
    top: 100px;
}

#description {
    position: absolute;
    left: 150px;
    top: 150px;
}

JS实现切换

$(function() { //页面加载完全后执行

    //绑定click事件，幻灯片切换按钮
    $("#slide-next").bind("click", slider.next);
    $("#slide-pre").bind("click", slider.pre);
    //标题隐藏
    $("#caption").hide();
    $("#description").hide();
    slider.init();
});


var slider = {
    num: -1, //幻灯片中照片数
    interval: 700, //照片偏移间隔
    index: 0, //当前照片的索引
    //幻灯片初始化
    init: function() {
        if (!slider.data || !slider.data.length) {
            return false;
        }
        var data = slider.data; //index.html输入的数据                           
        slider.num = data.length; //幻灯片数量
        for (var i = 0; i < slider.num; i++) { //设置照片的偏移量，超出外围的隐藏
            $('#' + data[i].id).css({
                left: (i * slider.interval)
            }); //设置left的偏移量
        }
        //填充标题以及描述字符
        $("#caption").html(slider.data[0].caption);
        $("#description").html(slider.data[0].description)
            //动画显示
        $("#caption").show(1000);
        $("#description").show(1000);
    },
    //前一张照片
    pre: function() {
        if (slider.index != 0) { //是否是第一张照片判断
            slider.index -= 1;
            //先隐藏标题和描述字符，然后在动态显示出来
            $("#caption").hide();
            $("#description").hide();
            //动画效果，移动#slide-runner实现画面切换
            $("#slide-runner").animate({
                left: "+=" + slider.interval + "px"
            }, 1000, function() {
                //动画完成之后执行的函数
                //动画显示标题以及描述
                $("#caption").html(slider.data[slider.index].caption);
                $("#description").html(slider.data[slider.index].description);
                $("#caption").show(1000);
                $("#description").show(1000);
            });
        }
    },
    //后一张照片
    next: function() {
        if (slider.index < (slider.num - 1)) { //判断是否是最后一张照片
            slider.index += 1;
            //先隐藏标题和描述字符，然后在动态显示出来
            $("#caption").hide();
            $("#description").hide();
            //动画效果，移动#slide-runner实现画面切换
            $("#slide-runner").animate({
                left: "-=" + slider.interval + "px"
            }, 1000, function() {
                //动画完成之后执行的函数
                //动画显示标题以及描述
                $("#caption").html(slider.data[slider.index].caption);
                $("#description").html(slider.data[slider.index].description);
                $("#caption").show(1000);
                $("#description").show(1000);
            });
        }
    }
}