zoukankan html css js c++ java

网页特效之图片幻灯片：幻灯片原理解剖与实现

在网上看到很多的幻灯片图片特效，实现大致分两种

一：滑动方式

二：渐变类方式

注意：结构分为：符合结构意义的，如：ul > li 结构，有意义，同时也能实现效果、不存在结构意义的，如：DIV 实现，不存在结构，只为实现效果。但不管哪种结构，原理还是那两种繁衍出来的，也就是对基本进行修改即可做出一款新的效果。

没有做不出的效果，只有想不出的效果，大家做特效或看特效的时候，可以进行幻想，想象出更加奇特新意的效果。（有点跑题）

对以上模式进行进阶的：无缝滚动、简略图方式，只要把原理掌握，就可以继续对基本框架结构的幻灯片进行修改。

滑动方式原理解剖

①、通过滚动条来产生滑动效果

父框架的宽度比子框架的宽度小，就可以产生滚动条，然后控制滚动条。修改css属性，隐藏滚动条，但测试的时候不隐藏，方便调试。

注意：控制父框架对象的滚动条属性，而不是子框架对象的滚动条。

图解：

②、通过把移动对象设置CSS属性为“相对定位”、“绝对定位”，控制对象的“top”、“left”的属性产生滑动效果 [个人还是比较喜欢这种方式]

图解：

渐变类型方式原理解剖

==========以下的是滑动方式==================

javascript原生幻灯片

1.最简单、效果最简单，虽然不好看。

原理：通过把要显示的元素进行前后操作

用到知识点：添加元素 appendChild()、取节点首元素 firstChild/firstElementChild/children[]、取最后元素 lastChild/lastElementChild、元素宽度 offsetWidth、点击事件 click

先贴CSS和HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>PPT幻灯片轮番播放</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }
        #main {
            padding: 5px;
            width: 690px;
            height: 344px;
            margin: 100px auto;
            position: relative;
            text-align: center;
        }
            /*相框warp*/
        .photo-warp {
            width: 680px;
            height: 344px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 18px #cecece;
        }
         /*ul*/
        .ul-ppt {
            width: auto;
            height: 344px;
            list-style: none;
        }
        .item {
            float: left;
            width: 680px;
            height: 344px;
            text-align: center;
        }

        .item img {
            width: 100%;
            height: 100%;
            border: none;
        }
        /*按钮*/
        .left, .right {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 120px;
            z-index: 1;
        }

        .left {
            background: url("images/prev.png") no-repeat;
            left: 0;
        }

        .right {
            background: url("images/next.png") no-repeat;
            right: 0;
        }
    </style>
</head>
<body>

<div id="main">
    <!--显示盒子，可以进行美化-->
    <div id="photoWarp" class="photo-warp">
        <!--放图片的列表-->
            <ul id="pptBox" class="ul-ppt">
                <li class="item"><img src="images/1.jpg" alt="1"/></li>
                <li class="item"><img src="images/2.jpg" alt="2"/></li>
                <li class="item"><img src="images/3.jpg" alt="3"/></li>
            </ul>
    </div>
    <!--按钮组-->
    <div id="leftButton" class="left"><a class="left-hover"></a></div>
    <div id="rightButton" class="right"><a class="right-hover"></a></div>
</div>

</body>
</html>

结构其实可以不一样，效果差不多、幻灯片的结构与效果都不一样的，思路很多，所以不完全一样。
javascript代码

function $(j) {
        return document.getElementById(j);
    }
    /*
     * 通过节点控制实现
     * */

    //ul盒子
    var ul = $("pptBox");
    //li 集合
    var li = document.getElementsByTagName("li");
    //li 的宽度
    var li_width = li[0].offsetWidth;
    // li 元素的长度
    var all_li = li.length;
    //设置ul的width
    ul.style.width = (all_li * li_width) + "px";

    //事件left
    $("leftButton").onclick = function () {

        var last_li;

        if (document.all) { //判断ie
            last_li = ul.lastChild; //取最后一个子元素
        } else {
            last_li = ul.lastElementChild; //w3c标准方法
        }

        ul.insertBefore(last_li, ul.children[0]); //移到第一个元素的左边
    };
    //事件right
    $("rightButton").onclick = function () {

        var first_li = ul.children[0];//取ul中第一个子元素

        ul.appendChild(first_li); //添加到ul

    }

第二个方法
原理，通过控制滚动条的位置来把要显示的图片滚动到现在位置。这是比较常用的方法，里面的长度比外面的盒子长度长就会出现滚动条。不过这种方式做出来的效果，在切换的时候还是不够理想。这个是左右滚动，如果要做上下滚动、还有无缝滚动（把原来的复制一个），不建议用这种。

知识点：元素宽度/高度（包含边框和内边距）offsetWidth/offsetHeight、滚动条左边距离 scrollLeft、重复执行定时器 setInterval()、清除重复执行定时器 clearInterval()

CSS和HTML 代码与上面基本一样，因为上面的例子是通过这个例子修改的。

因为这个代码是分开写的，如果连续点击会出现卡顿，因为重复执行定时器，解决，把全部代码写成一个插件调用或一个函数，现在为了测试方便才这样写的

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>PPT幻灯片轮番播放</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }

        #main {
            padding: 5px;
            width: 690px;
            height: 344px;
            margin: 100px auto;
            overflow: hidden;

        }

            /*相框warp*/
        .photo-warp {
            width: 680px;
            height: 344px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 18px #cecece;
            overflow: hidden;
            border-radius: 1.5em;
        }

            /*ul*/
        .ul-ppt {
            width: auto;
            height: 344px;
            list-style: none;
            white-space: nowrap;
            clear: both;
        }

        .item {
            float: left;
            width: 680px;
            height: 344px;
        }

        .item img {
            width: 100%;
            height: 100%;
            border: none;
        }

            /*按钮*/
        .left, .right {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 214px;
            z-index: 1;
        }

        .left {
            background: url("images/prev.png") no-repeat;
            left: 220px;
        }

        .right {
            background: url("images/next.png") no-repeat;
            right: 220px;
        }

    </style>
</head>
<body>

<div id="main">
    <div id="photoWarp" class="photo-warp">
        <ul id="pptBox" class="ul-ppt">
            <li class="item"><img src="images/1.jpg" alt="1"/></li>
            <li class="item"><img src="images/2.jpg" alt="2"/></li>
            <li class="item"><img src="images/3.jpg" alt="3"/></li>
        </ul>
    </div>
    <div id="leftButton" class="left"><a class="left-hover"></a></div>
    <div id="rightButton" class="right"><a class="right-hover"></a></div>
</div>
<div id="txt" style=" 280px;height: auto;"></div>
<script type="text/javascript">
    function $(j) {
        return document.getElementById(j);
    }

    //ul盒子
    var ul = $("pptBox");
    //li 集合
    var li = document.getElementsByTagName("li");
    //li 的宽度
    var li_width = li[0].offsetWidth;
    // li 元素的长度
    var all_li = li.length;
    //外盒子
    var box = $("photoWarp");
    //缓冲值
    var buffer = 30;
    //缓冲速度
    var buffer_speed = 1;
    //设置ul的width
    ul.style.width = (all_li * li_width) + "px";

    //事件left
    $("leftButton").onclick = function () {

        function ppt_run() {
            //没有距离
            if (box.scrollLeft == 0) {

                function demo() {
                    if (box.scrollLeft == li_width * 2) {
                        clearInterval(a);
                        clearInterval(on_run);
                    }

                    box.scrollLeft = box.scrollLeft + 25;
                }

                var a = setInterval(demo, 10);

            }
            //有距离可以移动
            if (box.scrollLeft <= li_width * (Math.ceil(box.scrollLeft / li_width) - 1) + buffer) {
                box.scrollLeft = box.scrollLeft - buffer_speed;
            }
            else {
                box.scrollLeft = box.scrollLeft - 25;
            }

            //只滚动一个图片的距离
            if (box.scrollLeft % li_width == 0) {
                clearInterval(on_run);
            }

        }

        var on_run = setInterval(ppt_run, 10);
    };


    //事件right
    $("rightButton").onclick = function () {

        function ppt_run() {
            //如果到了顶边
            if (box.scrollLeft == li_width * 2) {
                function demo() {
                    if (box.scrollLeft == 0) {
                        clearInterval(a);
                        clearInterval(on_run);
                    }
                    box.scrollLeft = box.scrollLeft - 25;
                }

                var a = setInterval(demo, 10);

            }

            //没到达最右边还可以移动

            if (box.scrollLeft >= li_width * Math.ceil(box.scrollLeft / li_width) - buffer && box.scrollLeft < li_width * (Math.ceil(box.scrollLeft / li_width) + 1)) {
                box.scrollLeft = box.scrollLeft + buffer_speed;
            } else {
                box.scrollLeft = box.scrollLeft + 25;
            }

            //只滚动一个图片的距离
            if (box.scrollLeft % li_width == 0) {
                clearInterval(on_run);
            }

        }

        var on_run = setInterval(ppt_run, 10);
    };


</script>
</body>
</html>

第三个方法

跟上面差不多，不过元素不是浮动，而且绝对定位，个人感觉这个方法还是比较好的。

代码还没写，

附上以前写过的一个jq图片滑动库（非无缝）

https://files.cnblogs.com/yyman001/JQMSlideshow.rar

下面有些是比较好的教程

【原】幻灯片系列之百叶窗

http://bbs.blueidea.com/thread-3003636-1-1.html

【原】幻灯片系列（二）--回旋滚轴切换

http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3004418

未完。。。等待更新。

查看全文

相关阅读:
关于ListView的注意点
 推荐一波瀑布流的RecylceView
RecycleView的简单应用
 Java Junit单元测试
 Java 2 个 List 集合数据求并、补集操作
 Java @Validated 遇到的大坑
 Java中的Validated验证
 使用一条sql语句查询多表的总数
 Java thymeleaf模板获取资源文件的内容
 Java热启动

原文地址：https://www.cnblogs.com/yyman001/p/js_ppt.html