javascript - 例如，如何构建像这样的简单图像旋转效果？

Question

有谁知道如何用简单的 javascript 和小 css 构建这个图像磁带效果？:> 示例：http ://coolcarousels.frebsite.nl/c/56/

Answer 1

如果您查看页面源代码，您将看到此脚本。

<script type="text/javascript" language="javascript" src="/js/jquery.carouFredSel.js"></script>

您还可以查看其调用的 javascript(jQuery) 代码

$(function() {
            var _direction = 'left';
            $('#carousel').carouFredSel({
                direction: _direction,
                responsive: true,
                circular: false,
                items: {
                    width: 350,
                    height: '100%',
                    visible: {
                        min: 2,
                        max: 5
                    }
                },
                scroll: {
                    items: 1,
                    duration: 1000,
                    timeoutDuration: 500,
                    pauseOnHover: 'immediate',
                    onEnd: function( data ) {
                        _direction = ( _direction == 'left' ) ? 'right' : 'left';
                        $(this).trigger( 'configuration', [ 'direction', _direction ] );
                    }
                }
            });
        });

您还将看到其在网站上应用的 CSS 样式

html, #c-carousel {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #c-carousel {
            min-height: 600px;
            background-color: #e6e6e6;
        }
        #c-carousel * {
            font-family: Arial, Geneva, SunSans-Regular, sans-serif;
            font-size: 14px;
            color: #333;
            line-height: 22px;
        }

        #wrapper {
            width: 100%;
            height: 200px;
            position: absolute;
            top: 150px;
            left: 0;
        }
        #carousel {
            width: 100%;
            overflow: hidden;
        }
        #carousel img {
            display: block;
            float: left;
        }

        #source {
            text-align: center;
            width: 400px;
            margin: 0 0 0 -200px;
            position: absolute;
            bottom: 10px;
            left: 50%;
        }
        #source, #source a {
            color: #999;
            font-size: 12px;
        }