如何在示例中构建像这样的简单图像旋转效果

How to build simple image rotation effect like this one in exapmle?

本文关键字：简单图像旋转像这样构建更新时间：2023-09-26

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

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

<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;
        }