javascript - 幻灯片暂停按钮不起作用

Question

这是一个幻灯片，我的问题是暂停按钮不起作用，它没有暂停幻灯片。它在 firebug 中没有任何错误。按钮变为恢复但不暂停幻灯片。我将非常感谢您的帮助。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication4.WebForm6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script 
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
  <script type="text/javascript" src="cycle.js"></script>

 <script style="text/javascript">
     $(function () {
         $('.slider img:gt(0)').hide();/*hides first 2th 3th pics*/
         setInterval(function () {
             $('.slider :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.slider');
         },
      3000);
     });

     $(document).ready(function ($) {

         $('#playbutton').click(function () {
             $(this).css('margin-left', '-9999px');
             $('#pausebutton').css('margin-left', 0);
         });

         $('#pausebutton').click(function () {
             $(this).css('margin-left', '-9999px');
             $('#playbutton').css('margin-left', 0);
         });

     });

     $(document).ready(function ($) {$('#playbutton').click(function() { 
    $('#mg').cycle('resume'); 
}); });

$(document).ready(function ($) {$('#pausebutton').click(function() { 
    $('#mg').cycle('pause');
});
});
 </script>



    <style type="text/css">
        .slider
        {
           position:fixed; 
            width:750px; 
            height:400px; 
            background-color:white; 
            top: 9px; left: 12px; z-index:-1; 
            background:transparent url(loading.gif) no-repeat 50% 50%;
        }
         .slider img {
        border-style: none;
            border-color: inherit;
            border-width: medium;
            position:fixed;

            top: 42px;
            left: 50px;
            height: 220px;
            width: 651px;
            bottom: 267px;
        }
       #pausebutton {
    left: 356px;
    margin-left:0px;
    position:absolute;
            top: 273px;
            height: 27px;
        }
#playbutton {
    left: 356px;
    margin-left:0px;
    position:absolute; top: 273px;
            height: 27px;
}

    </style>



</head>
<body >

      <div class="slider" id="mg" >
                    <img src="slider-2.jpg"  /> 
                    <img src="slider-3.jpg"  />
                    <img src="slider-4.jpg"  />       
               </div >

<a href="#" id="playbutton"><img src="play.png" alt="play button" title="Play" /></a> 

<a href="#" id="pausebutton" ><img src="pause.png" alt="pause button" title="Pause" /></a> 




</body>
</html>

score 0 · Accepted Answer

我认为您需要停止<a>标签的默认行为，因为单击它会导致您的页面刷新。

$('#pausebutton').click(function(e) {
    e.preventDefault();
    $('#mg').cycle('pause');
});

score 0 · Accepted Answer

我认为您的代码有逻辑错误，因为当 firebug 没有任何错误时，它表明您的代码没有任何语法错误。尝试通过 firebug 调试您的代码或再次检查您的代码。另一件事是在大多数情况下在多个浏览器中测试您的代码 java 脚本代码在所有浏览器中都不起作用。

javascript - 幻灯片暂停按钮不起作用

2 回答 2

Related

Reference