Question

我有幻灯片放映.....

        <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>

我想通过从右向左水平滚动来改变幻灯片互相替换的方式（我希望这是有道理的）。这种过渡会被称为什么？可以通过简单的几行完成吗？

（我知道对于经验丰富的网页设计师来说这可能是一件容易的事，但我刚开始并且不确定这会是什么）

Answer 1

您可以使用jQuery来执行此操作。您可以找到许多插件here。

Answer 2

你可以简单地使用jquery来获得这样的效果我为两个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>

幻灯片放映，幻灯片效果

2 个答案: