jquery高手帮忙给图片切换代码加个自动切换功能？
<scriptsrc="jquery-1.3.1.js"type="text/javascript"></scr...
<script src="jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ var $lists = $(".showimg li"); var $listsimg = $(".showimg img"); var length = $lists.length; var i = 0; /*下一张*/ $(".nextLink").click(function(){ i++; if( i > (length-1)){ i = 0 ; } showImg(i); return false; }); /*上一张*/ $(".prevLink").click(function(){ i--; if( i < 0){ i = length-1 ; } showImg(i); return false; }); $("a").focus(function(){ $(this).blur(); return false; }); function showImg(i) { $lists.hide().eq(i).fadeIn("slow"); } showImg(0); }); </script></head><body><div class="box"> <div class="CRviewer"> <ul class="showimg" > <li><img src="images/sample1.gif" alt="图片1"/>标题1</li> <li><img src="images/sample.gif" alt="图片2"/>标题2</li> <li><img src="images/sample1.gif" alt="体育片2"/>标题3</li> <li><img src="images/sample.gif" alt="tupfd"/>标题4</li> </ul> <div class="hoverNav"> <a class="prevLink" href="#">向左</a><a class="nextLink" href="#">向右</a> </div> </div></div>代码如上面所示，我要加个功能：当鼠标没有点击“向左”或“向右”时，会自动以4秒的时间隔间切换图片跟标题。
展开
展开全部
<script type="text/javascript">
$(document).ready(function(){
var $lists = $(".showimg li");
var $listsimg = $(".showimg img");
var length = $lists.length;
var i = 0;
autoshownext=function(){
i++; if( i > (length-1)){ i = 0 ; } showImg(i); return false;
}
autoshowprev=function(){
i--; if( i < 0){ i = length-1 ; } showImg(i); return false;
}
$(".nextLink").click(function(){ i++; if( i > (length-1)){ i = 0 ; } showImg(i); return false; });
$(".prevLink").click(function(){ i--; if( i < 0){ i = length-1 ; } showImg(i); return false; });
$("a").focus(function(){ $(this).blur(); return false; });
function showImg(i) { $lists.hide().eq(i).fadeIn("slow"); }
showImg(0);
var myshowid=setInterval(autoshownext,3000);
$(".prevLink").click(function(){
clearInterval(myshowid);
});
});
</script>
<div class="box">
<div class="CRviewer">
<ul class="showimg" >
<li><img src="images/sample1.gif" alt="图片1"/>标题1</li>
<li><img src="images/sample.gif" alt="图片2"/>标题2</li>
<li><img src="images/sample1.gif" alt="体育片2"/>标题3</li>
<li><img src="images/sample.gif" alt="tupfd"/>标题4</li>
</ul>
<div class="hoverNav"> <a class="prevLink" href="#">向左</a><a class="nextLink" href="#">向右</a> </div>
</div>
</div>
$(document).ready(function(){
var $lists = $(".showimg li");
var $listsimg = $(".showimg img");
var length = $lists.length;
var i = 0;
autoshownext=function(){
i++; if( i > (length-1)){ i = 0 ; } showImg(i); return false;
}
autoshowprev=function(){
i--; if( i < 0){ i = length-1 ; } showImg(i); return false;
}
$(".nextLink").click(function(){ i++; if( i > (length-1)){ i = 0 ; } showImg(i); return false; });
$(".prevLink").click(function(){ i--; if( i < 0){ i = length-1 ; } showImg(i); return false; });
$("a").focus(function(){ $(this).blur(); return false; });
function showImg(i) { $lists.hide().eq(i).fadeIn("slow"); }
showImg(0);
var myshowid=setInterval(autoshownext,3000);
$(".prevLink").click(function(){
clearInterval(myshowid);
});
});
</script>
<div class="box">
<div class="CRviewer">
<ul class="showimg" >
<li><img src="images/sample1.gif" alt="图片1"/>标题1</li>
<li><img src="images/sample.gif" alt="图片2"/>标题2</li>
<li><img src="images/sample1.gif" alt="体育片2"/>标题3</li>
<li><img src="images/sample.gif" alt="tupfd"/>标题4</li>
</ul>
<div class="hoverNav"> <a class="prevLink" href="#">向左</a><a class="nextLink" href="#">向右</a> </div>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
