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

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设置left来移动#moving_part。

我使用 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 );