0

私はスライドショーを持っています.....

        <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="slide-image-1.png"
    var image2=new Image()
    image2.src="slide-image-2.png"

    //-->
    </script>

<img name="slide" class="image1" src="slide-image-1.png" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<2)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",4000)
}
slideit()
//-->
</script>

右から左に水平にスクロールすることで、スライドが互いに置き換わる方法を変更したいと考えています (これが理にかなっていることを願っています)。このタイプのトランジションは何と呼ばれますか? 単純な数行でそれを行うことができますか?

(これはおそらく経験豊富な Web デザイナーにとっては簡単なことだと思いますが、まだ始めたばかりで、これがどうなるかわかりません)

4

2 に答える 2

1

jQuery を使用してこれを行うことができます。多くのプラグインがここにあります。

于 2012-06-29T19:18:22.953 に答える
0

あなたは単にjqueryを使ってそのような効果を得ることができます私は2つのdivのアニメーションのための擬似コードを追加しました

<body>
    <div id="divone" style="background-color:#808080;width:150px;height:250px;"></div>
    <div id="div1" style="background-color:#0026ff;width:150px;height:250px;display:none;"></div>
    <script>
        //jQuery("#divone").animate({ opacity: 0.10 }, 5000);
        //jQuery("#divone").fadeOut(5000);
        jQuery("#divone").fadeOut(5000, function () { jQuery("#div1").fadeIn(5000) })
    </script>
</body>
于 2012-06-29T19:36:29.067 に答える