1

我几乎没有让这段代码工作。只剩下一件事了。

我想在我现有的幻灯片放映中添加上一个、下一个、播放和暂停按钮，就像在这个页面中一样。

我确实看过这个，但很混乱和复杂。

你能帮我修改下面的代码吗？

谢谢

<html>
<style>
*           { margin: 0px; padding: 0px; }
#cover      { width: 100%; height: 300px; background: #CCCCCC; }
#cover div  { width: 100%; height: 200px; display: none; background: #FFFFFF; }
.content    { text-align: center; }
</style>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            var div_array   = [];
            var i           = 0;

            $('#cover div').each(function()
            {
                //alert($(this).attr('id'));
                div_array.push('#' + $(this).attr('id'));

            });

            $(function(){
                (function nextImage()
                {
                    $(div_array[i++] || div_array[i = 0, i++]).hide().delay(500).fadeIn(1000).delay(1000).fadeOut(500, nextImage);
                })();
            });
        });
    </script>
</head>

<body>
    <div id="cover">
        <div id="slider_1"><p class="content">SLIDER ONE</p></div>
        <div id="slider_2"><p class="content">SLIDER TWO</p></div>
        <div id="slider_3"><p class="content">SLIDER THREE</p></div>
    </div>
</body>

4

1 回答 1

4

我尝试在以下 URL 为您创建示例演示。

http://jsfiddle.net/codebombs/ukNmT/

HTML

<div id='items'>
    <div class='item first'>Item 1</div>
    <div class='item'>Item 2</div>
    <div class='item'>Item 3</div>
    <div class='item'>Item 4</div>
    <div class='item'>Item 5</div>
</div>
<ul id='controls'>
    <li id='prev'>Prev</li>
    <li id='play'>Play</li>
    <li id='pause'>Pause</li>
    <li id='next'>Next</li>
</ul>

CSS

#items {
    position : relative;
    width : 400px;
    height : 200px;
    top : 20px;
    left : 20px;
}
.item {
    position : absolute;
    background-color : #eee;
    border : 1px solid #ccc;
    width : 398px;
    height : 198px;
    display :none;
    text-align : center;
    font-size : 72px;
}
.first{
    display : block;
}
#controls {
    margin-top : 30px;
}
li {
    display : inline-block;
    padding : 5px;
    border : 1px solid #ccc;
    background-color : #eee;
    cursor : pointer;
}
#play {
    display : none;
}

JavaScript

//To store timeout id
var timeoutId;

var slideImage = function( step ) {

    if ( step == undefined ) step = 1;

    //Clear timeout if any
    clearTimeout ( timeoutId );

    //Get current image's index
    var indx = $('.item:visible').index('.item');

    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadeout this item
       $('.item:visible').fadeOut();
    }

    //Increment for next item
    indx = indx + step ;

    //Check bounds for next item
    if ( indx >= $('.item').length ) {
        indx = 0;
    } else if ( indx < 0 ) {
        indx = $('.item').length - 1;
    }

    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadein next item
       $('.item:eq(' + indx + ')').fadeIn();
    }

    //Set Itmeout
    timeoutId = setTimeout ( slideImage, 5000 );
};

//Start sliding
slideImage(0);

//When clicked on prev
$('#prev').click(function() {

    //slideImage with step = -1
    slideImage ( -1 );   
});

//When clicked on next
$('#next').click(function() {

     //slideImage with step = 1
     slideImage ( 1 );
});

//When clicked on Pause
$('#pause').click(function() {

   //Clear timeout
   clearTimeout ( timeoutId );    

    //Hide Pause and show Play
    $(this).hide();
    $('#play').show();
});

//When clicked on Play
$('#play').click(function() {

   //Start slide image
   slideImage(0);

   //Hide Play and show Pause
   $(this).hide();
   $('#pause').show();    
});

请检查一下，如果您需要任何修改，请告诉我。

于 2012-08-03T17:16:21.697 回答