向幻灯片放映添加滚动显示样式

Adding rollover styles to slideshow

本文关键字：滚动 显示 样式 添加 幻灯片      更新时间：2023-09-26

嗨，我有一个简单的JavaScript幻灯片，我想知道如何在幻灯片上添加淡出和淡入等幻灯片效果。这是幻灯片代码：

var i, imgs, pic;
function rotate()
{
  pic.src = imgs[i] ;
  (i === (imgs.length -1) ) ? i=0 : i++ ;
  setTimeout( rotate, 5000 ); 
}
function init()
{
  pic = document.getElementById("pic");
  imgs = [ "/beta/images/img1.jpg", "/beta/images/img2.jpg", "/beta/images/img3.jpg", "/beta/images/img4.jpg" ] ;
  var preload= new Array();
  for( i=0; i< imgs.length; i++ )
  {
    preload[ i ] = new Image();
    preload[ i ].src = imgs[ i ];
  }
  i=0;
  rotate();
}
onload=init;

我尝试将我的rotate()更改为：

function rotate()
{
  pic.src = imgs[i] ;
  (i === (imgs.length -1) ) ? i=0 : i++ ;
  setInterval( rotate, 5000 ); 
   $("#pic").fadeIn().show(10000).fadeOut();
}

它开始扰乱

检查此项：http://jsfiddle.net/codebombs/ukNmT/

我使用jQuery创建了一个具有渐变效果的简单幻灯片。

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();    
});
相关文章：