如何爲幻燈片添加轉換？

Question

現在用圖像幻燈片在我的地盤我想添加過渡到滑塊誰能幫助我，請...如下所示 滑塊是一樣的： http://yellowandred.in/PGP%20Enterprise/index.php

Answer 1

你可以使用jQuery http://jquery.com/

你的HTML代碼：

<!-- styling the height and width is important for some transitions --> 
<div id="slideshow" style="width: 400px; height: 200px"> 
    <img src="../img/one.jpg"> <!-- can use any element you want, not just images --> 
    <img src="../img/two.jpg"> 
    <img src="../img/three.jpg"> 
    <img src="../img/four.jpg"> 
    <img src="../img/five.jpg"> 
</div> 

您的Java腳本：

var $el = $('#slideshow'); 
$el.slideshow({ 
    duration: 400, 
    delay: 3000, 
    selector: '> img', 
    transition: 'push(up)', 
    autoPlay: true, 
    show: function (params){ 
    var nextIndex = params.next.index; 
    if (nextIndex > 2) { 
     // do something awesome when the slide is after the third slide. 
    } 
    }, 
    complete: function (params){ 
    // do something awesome when a transition finishes 
    } 
}); 

// get the slideshow object if you want it 
var slideshow = $el.data('slideshow'); 

// show the third slide 
$el.slideshow('show', 2); // Element API 
slideshow.show(2); // object API 

// show the next slide 
slideshow.show('next'); 

// pause and play 
slideshow.stop(); 
slideshow.play(); 

自定義切換：

jQuery.rf.slideshow.defineTransition('slide', function (params, dir, ease){ 
    var animation = {}, 
     prop = (dir == 'left' || dir == 'right') ? 'left' : 'top'; 
    animation[prop] = (dir == 'left' || dir == 'up') ? '-100%' : '100%'; 
    params.previous.animate(animation, params.duration, ease); 
}); 

你也可以創建自己的轉變;）