我想在鼠标上暂停滑动图像 [英] i want to pause the sliding image on mouse over

问题描述

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <script type="text/javascript">
            var image1=new Image()
            image1.src="images/flash1.jpg"
            var image2=new Image()
            image2.src="images/flash8.jpg"
            var image3=new Image()
            image3.src="images/flash3.jpg"
            var image4=new Image()
            image4.src="images/flash4.jpg"
        </script>
        <script type="text/JavaScript">




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <img src="images/flash1.jpg" Height="500px" Width="1200px" name="slide"/> 
                   
                    <script>
                                              
                                                   
                                                    var step=1
                                                    function slideit(){
                                                    
                                                        if (!document.images)
                                                            return
                                                        document.images.slide.src=eval("image"+step+".src")
                                                        if (step<4)
                                                            step++
                                                        else
                                                            step=1
                                                      
                                                        setTimeout("slideit()",1250)
                                                    }
                                                     slideit()
                                                  
                                                  </script>

推荐答案

您还没有提到如何停止setTimeout。



clearTimeout可用于停止setTimeout，但需要将其分配给变量。

You have not mentioned how you want the setTimeout to be stopped.

clearTimeout can be used to stop setTimeout, but it needs to be assigned to a variable.

//set global variable for setTimeout to be assigned to, similar how the var step variable is created.
var ImgSlide;

//Change setTimeout to
ImgSlide = setTimeout("slideit()",1250)

//create a stopit type function and call it to stop setTimeout
function stopit(){
    clearTimeout(ImgSlide);
}

<!--the stopit function can be call with anchor like so-->
<a href="#" >StopIt</a>

对于工作示例读取，Window setTimeout（）方法： http：//www.w3schools。 com / jsref / met_win_settimeout.asp [ ^ ] < br $>


快乐编码:)



这里有2个jsfiddle例子：

OnClick - http://jsfiddle.net/yqtf2qzt/ [ ^ ]

MouseOver / MouseOut - http： //jsfiddle.net/yqtf2qzt/1/ [ ^ ]

For working example read, Window setTimeout() Method: http://www.w3schools.com/jsref/met_win_settimeout.asp[^]

happy coding :)

Here are 2 jsfiddle examples:
OnClick - http://jsfiddle.net/yqtf2qzt/[^]
MouseOver/MouseOut - http://jsfiddle.net/yqtf2qzt/1/[^]

在这里我修改你的代码。请检查它是否运作良好：

Here I modify your code. Please check if it works well :

<img src="images/i1.jpg" id="slide" height="200" width="500px" alt="" name="slide" />

<script type="text/javascript">
        var slideimages = new Array()
        slideimages[0] = new Image()
        slideimages[0].src = "images/i1.jpg"
        slideimages[1] = new Image()
        slideimages[1].src = "images/i2.jpg"
        slideimages[2] = new Image()
        slideimages[2].src = "images/i3.jpg"

        var pauseSlide = true;
        var step = 0

        function slideit() {
            document.getElementById("slide").onmouseover = function () {
                pauseSlide = false;
            };

            document.getElementById("slide").onmouseout = function () {
                pauseSlide = true;
            };

            if (!document.images)
                return
            if (pauseSlide) {
                document.getElementById('slide').src = slideimages[step].src

                if (step < 2)
                    step++
                else
                    step = 0
            }
            setTimeout("slideit()", 500);

        }
        slideit();

    </script>

希望它可以帮到你。

祝你好运。

Hope it helps you.
Good luck.

这篇关于我想在鼠标上暂停滑动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！