html - 幻灯片控制动作 - Thinbug

幻灯片控制动作

时间：2013-06-19 14:14:37

标签： html controls slideshow playback

我正在尝试为我的幻灯片图像设置一个控件。除了自动播放之外，我需要一个“下一个”和“上一个”按钮，如果我愿意，可以更快地跨越图像。

这是我的代码，直到现在。请帮忙。谢谢！

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/head/facebook.png"
var image2 = new Image()
image2.src = "img/head/mess.png"
var image3 = new Image()
image3.src = "img/head/skype.png"
var image4 = new Image()
image4.src = "img/head/twitter.png"
</script>
</head>
<body>
<p><img src="img/head/facebook.png" width="39" height="45" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<4)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

1 个答案:

答案 0 :(得分：0)

放置以下代码：

HTML

<a href="#" name="pre">Previous</a>
<a href="#" name="nex">Next</a>

JAVASCRIPT

$(document).ready(function() {
$("#nex").click(function(){
document.images.slide.src = eval("image"+step+".src");
            if(step<4)
                step++;
            else
                step=1;
});
$("#pre").click(function(){
step--;
if(step=1)
step=4;
document.images.slide.src = eval("image"+step+".src");
            });
});