Question

我需要创建一个简单的图像+文本旋转器。就像图片https://dl-web.dropbox.com/get/Public/rotator.jpg?_subject_uid=6084477&w=AADd9lfxtZZzhWbGMTKwMdWn3eVjgGZ_OplgxVycsivbHA一样。

它将是页面正文中的一个小块。元素应在一定时间后自动更改，但也可以使用箭头旋转它们。

我是编程的新手，所以如果这是一个太明显的问题，我很抱歉。我想我应该在这里使用CSS和Javascript？此外，我还尝试谷歌搜索一些代码示例，但我发现的所有内容看起来都太复杂了，而我需要非常简单和基本的功能。

感谢您的建议。

Answer 1

这样的基本想法是使用position: relative的div和一个图像的宽度和高度。让我们称之为#images_holder。在此#images_holder中将是另一个具有position: absolute的div，一个图像的高度和所有图像的宽度。让我们称之为内部div #moving_part。在此#moving_part中，您可以放置图片。如果您想要包含文字的图片，请为每张图片创建一个float: left，position: relative和一张图片的宽度和高度的div。让我们称之为div .image_holder。在.image_holder内，您可以将图片和文字放在position: absolute的范围内。

通过这样的操作，您可以通过使用javascript设置#moving_part来移动left。

我使用jQuery编写了一个这样的示例，但它只是为了向您展示方式，它不是完整的解决方案。它有一些缺陷，比如你在移动时多次在move_left_button上点击它，它可以将你的图像移动到可视区域之外，因为只要你点击按钮就检查它是否可以移动它并不考虑它是否是已经开始了。要解决此问题，您应该使用例如data-moving属性，在移动开始时将其设置为true，在完成移动时将其设置为false，并且仅在设置为false时才开始移动。如果宽度和高度是从元素动态获得而不是硬编码也是个好主意。使用此代码，您必须为宽度和高度设置自己的值，并根据图像宽度，图像数量和当前左值来计算何时允许移动。

这也适用于每页只有一个滑块的情况。如果你想要更多，你必须将id更改为类，并重写代码，以便它只移动你单击的images_holder的moving_part。像$( ".images_holder" ).each( function(){ $this_moving_part = $( this ).find( ".moving_part" ); /* and so on... */ } );

这样的东西

这是Jsfiddle：http://jsfiddle.net/5Lc7cc7u/

HTML：

<div id="images_holder">
    <div id="move_left_button">LEFT</div>
    <div id="move_right_button">RIGTH</div>
    <div id="moving_part" data-direction="to_left">
        <div class="image_holder">
            <span>image 1</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
        <div class="image_holder">
            <span>image 2</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
        <div class="image_holder">
            <span>image 3</span>
            <img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
        </div>
    </div>
</div>

CSS：

#images_holder {
    position: relative;
    overflow: hidden;
    width: 480px;
    height: 360px;
    color: red;
}
#moving_part {
    position: absolute;
    top: 0;
    width: 1440px; /* image_width * number_of_images */
    height: 360px;
    left: 0;
}
.image_holder {
    float: left;
    width: 480px;
    height: 360px;
    position: relative;
}
.image_holder span {
    position: absolute;
    top: 20px;
    left: 200px;
}

#move_left_button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
#move_right_button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}

使用Javascript：

$( "#move_left_button" ).click( function() {
        move_left();
} );

$( "#move_right_button" ).click( function() {
        move_right();
} );

function move_left() {
    if( get_acct_left() >= -480 ) {
        $( "#moving_part" ).animate( {
            left: "-=480px"
        }, 1000, function() {
            if( get_acct_left() <= -480 * 2 ) {
                $( "#moving_part" ).attr( "data-direction", "to_right" );
            }
        } );
    }
}
function move_right() {
    if( get_acct_left() < 0 ) {
        $( "#moving_part" ).animate( {
            left: "+=480px"
        }, 1000, function() {
            if( get_acct_left() >= 0 ) {
                $( "#moving_part" ).attr( "data-direction", "to_left" );
            }
        } );
    }
}

function get_acct_left() {
    return parseInt( $( "#moving_part" ).css( "left" ) );
}

function move_to_next() {
    if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
        move_left();
    } else {
        move_right();
    }
}

setInterval( move_to_next, 4000 );

简单的图像与文本滑块/旋转器

1 个答案: