【发布时间】:2011-01-12 21:56:45
【问题描述】:
我的网站上有一个幻灯片库。有一个来自我正在使用的 JQuery 插件的脚本,当我单击锚点时它会执行一些功能。我想要做的是看看我是否可以让暂停按钮在单击时变为悬停状态,然后如果再次单击它又变回正常状态。
我尝试这样做只是说如果 img.src == 正常状态,然后在单击时将其更改为悬停状态。当然没有用,因为当你将鼠标悬停在它上面时,它不再处于正常状态。希望这是有道理的。这是我的代码:
<a id="galleryPause" href="#">
<img src="images/galleryPause.jpg" onmouseover="this.src='images/galleryPauseHover.jpg'" onmouseout="this.src='images/galleryPause.jpg'" style="margin-left:-4px;" />
</a>
我基本上想保留现有的悬停功能并向其添加点击功能,将默认图像更改为悬停状态并返回。这是为了让用户知道画廊已暂停。感谢您对此的任何帮助!
更新: 这是我正在使用的插件的代码。有没有办法我可以劫持这段代码来让它做我想做的事?
插件脚本链接:http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
我的页面<head>...</head>中的代码:
<script type="text/javascript">
var autoPlayTime=5000;
autoPlayTimer = setInterval( autoPlay, autoPlayTime);
function autoPlay(){
Slidebox('next');
}
$('#bannerWrapper .thumbs .next').click(function () {
Slidebox('next','next');
});
$('#bannerWrapper .thumbs .previous').click(function () {
Slidebox('previous','next');
});
});
//slide page to id
function Slidebox(slideTo,autoPlay){
var animSpeed=1000; //animation speed
var easeType='easeInOutExpo'; //easing type
var sliderWidth=$('#bannerWrapper').width();
var leftPosition=$('#bannerWrapper .container').css("left").replace("px", "");
$("#bannerWrapper .content").each(function (i) {
totalContent=i*sliderWidth;
$('#bannerWrapper .container').css("width",totalContent+sliderWidth);
});
if( !$("#bannerWrapper .container").is(":animated")){
if(slideTo=='next'){ //next
if(autoPlay=='stop'){
clearInterval(autoPlayTimer);
}
if(leftPosition==-totalContent){
$('#bannerWrapper .container').animate({left: 0}, animSpeed, easeType); //reset
} else {
$('#bannerWrapper .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
}
} else if(slideTo=='previous'){ //previous
if(autoPlay=='stop'){
clearInterval(autoPlayTimer);
}
if(leftPosition=='0'){
$('#bannerWrapper .container').animate({left: '-'+totalContent}, animSpeed, easeType); //reset
} else {
$('#bannerWrapper .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
}
} else {
var slide2=(slideTo-1)*sliderWidth;
if(leftPosition!=-slide2){
clearInterval(autoPlayTimer);
$('#bannerWrapper .container').animate({left: -slide2}, animSpeed, easeType); //go to number
}
}
}
}
</script>
【问题讨论】: