[英]slideshow pause button doesn't work
这是一个幻灯片,我的问题是暂停按钮不起作用,它也不能暂停幻灯片。它在萤火虫中没有任何错误。该按钮会恢复,但不会暂停幻灯片。 非常感谢您的帮助。
<%@ 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>
我认为您需要停止<a>
标记的默认行为,因为单击它会导致页面刷新。
$('#pausebutton').click(function(e) {
e.preventDefault();
$('#mg').cycle('pause');
});
我认为您的代码有逻辑错误,因为当firebug没有任何错误时,它表明您的代码没有任何语法错误。尝试通过firebug调试代码或再次检查代码。 另一件事是,大多数情况下,在所有浏览器中Java脚本代码都无法正常运行,因此您需要在多个浏览器中测试您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.