幻灯片暂停按钮不起作用答案

【问题标题】：slideshow pause button doesn't work幻灯片暂停按钮不起作用
【发布时间】：2013-06-29 01:33:42
【问题描述】：

这是一个幻灯片，我的问题是暂停按钮不起作用，它没有暂停幻灯片。它在 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>

【问题讨论】：

也许cycle 函数在您尝试调用它的任何对象上都不存在？
在我看来，$('#mg') 是一个普通的旧 div。

标签： javascript jquery asp.net web-applications jquery-cycle

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果控制台中没有任何 JavaScript 错误，任何尝试回答都将在黑暗中拍摄。您可能想发布一个链接供人们查看示例。它将帮助您获得完整的答案。
你的意思是我该怎么办？
我的意思是你可以发布一个指向相关页面的公共链接，以便其他人可以查看吗？