0

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

2 回答 2

0

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

$('#pausebutton').click(function(e) {
    e.preventDefault();
    $('#mg').cycle('pause');
});
于 2013-07-01T21:26:39.407 回答
0

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

于 2013-07-02T10:17:19.100 回答