菜鸟求助，jquery增加点击显示上一张图片 下一张图片时间
0
悬赏园豆：100
[已解决问题]
解决于 2012-07-26 11:55
网上找了一个jquery的图片轮播 但我想增加点击左边的按钮图片显示上一张，点击右边按钮图片显示下一张。因为急用，我初学JS jquery 自己实在笨，写不出来，所以希望前辈们给看看。
效果图如下图，只剩下点击左边显示上一篇，点击右边那图片显示下一张，希望大家帮我一把。
<!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> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title> 图片轮播 </title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> #jiaodiantu{ width:634px; height:253px; background:#f4f9fc; padding:5px 0; position:relative; } .prev{ display:block; float:left; width:33px; height:253px; text-indent:-9999px; background:url(../images/nextleft.gif) no-repeat left center; } .next{ display:block; float:right; width:33px; height:253px; text-indent:-9999px; background:url(../images/nextright.gif) no-repeat left center; } #lunboBox{ width:313px; height:253px; text-align:center; position:absolute; left:35px; top:5px; overflow:hidden; } .imgb{ width:313px; height:253px; text-align:center; } .imgb a{ display:block; width:313px; height:253px; text-decoration:none; font-size:14px; color:#000; line-height:20px; } .imgb li{display:none;} .imgb li.selected {display:block;} .imgs li.selected img,.imgs li.msenter img {border-color:#999;} .imgb li img{ width:313px; height:230px; overflow:hidden; } .imgs li a{ line-height:20px; text-decoration:none; color:#1b517d; } .imgs{ width:250px; height:253px; overflow:hidden; list-style:none; position:absolute; left:350px; top:5px; } .imgs li{ display:inline; float:left; width:115px; height:119px; margin:0 5px 8px; text-align:center; } .imgs li img{ width:111px; height:99px; border:1px solid #ccc; padding:1px; overflow:hidden; } .imgs li.hover{ background:#ccc; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".imgs_bg").css("opacity","0.6"); //页面加载完成后先设置按钮后的半透明背景 $(".imgs li").each(function() { //对按钮遍历操作 $(this).css("opacity","0.6"); //设置每个按钮的不透明度0.6 }).hover(function() { $(this).addClass("msenter").stop(true).animate({opacity:1}); //按钮鼠标经过时完全不透明 },function() { $(this).removeClass("msenter").stop(true).animate({opacity:0.6}); //按钮鼠标滑出时恢复0.6的不透明度 }); var len = $(".imgs li").length; //获取焦点图中的图片总数 var index = 0; //图片索引值默认为0 var picTimer; //声明一个时间变量备用 $(".imgs li").click(function() { //按钮的鼠标单击事件 index = $(".imgs li").index(this); //获取到被单击按钮的索引值（顺序） showPic(index); //通过showPic()函数显示该索引值的图片 }).eq(0).click(); //初始化，默认显示索引值为0（第一张）的图片 $(".imgb").hover(function() { clearInterval(picTimer); //鼠标经过大图片时停止自动播放 },function() { picTimer = setInterval(function() { showPic(index); //鼠标滑出时根据当前索引值继续自动播放 index++; //设置索引值为下一张图片 if(index==len) {index=0;} //如果索引值等于图片总数，下一次显示第一张图片 },3000); }).trigger("mouseleave"); //初始化，触发鼠标滑出事件，即自动播放 function showPic(index) { $(".imgb li").removeClass("selected").eq(index).addClass("selected"); //根据index变量（索引值）给相应的大图添加selected的类，并移除其它大图的selected类 $(".imgs li").removeClass("selected").eq(index).addClass("selected");//根据index变量（索引值）给相应的按钮添加selected的类，并移除其它按钮的selected类 } }); </script> </head> <body> <div id="jiaodiantu"> <div class="prev">上一张图片</div> <div id="lunboBox"> <ul class="imgb"> <li><a href="#"><img src="images/a.jpg" alt="图片一" /><span class="title">图片标题一</span></a></li> <li><a href="#"><img src="images/b.jpg" alt="图片一" /><span class="title">图片标题二</span></a></li> <li><a href="#"><img src="images/c.jpg" alt="图片一" /><span class="title">图片标题三</span></a></li> <li><a href="#"><img src="images/d.jpg" alt="图片一" /><span class="title">图片标题四</span></a></li> <li><a href="#"><img src="images/e.jpg" alt="图片一" /><span class="title">图片标题五</span></a></li> </ul> </div> <ul class="imgs"> <li><img src="images/a.jpg" alt="图片一" /><span class="title">图片标题一</span></li> <li><img src="images/b.jpg" alt="图片一" /><span class="title">图片标题二</span></li> <li><img src="images/c.jpg" alt="图片一" /><span class="title">图片标题三</span></li> <li><img src="images/d.jpg" alt="图片一" /><span class="title">图片标题四</span></li> <li><img src="images/e.jpg" alt="图片一" /><span class="title">图片标题五</span></li> </ul> <div class="imgs_bg"></div> <div class="next">下一张图片</div> </div> </body> </html>
问题补充：
我用的是这个前辈的代码，大家先用他的图片。
http://www.54173.cn/blog/wp-content/uploads/2011/jquery/focus/
最佳答案
1
你到底是要哪个效果，是你问题中给出的还是链接里的？
收获园豆：100
谢谢，问题里给出的，我贴的代码里 再增加点击图片中的左边和右边红色圈住的地方 在大图位置显示上一张和下一张的图片。
@hinong: 你截图的网页地址是什么？
@artwl: 本地的。图片可以随便用其他的。
@artwl: 效果图就是上面代码的效果
@hinong:
$(function() { $(".imgs_bg").css("opacity","0.6"); //页面加载完成后先设置按钮后的半透明背景 $(".imgs li").each(function() { //对按钮遍历操作 $(this).css("opacity","0.6"); //设置每个按钮的不透明度0.6 }).hover(function() { $(this).addClass("msenter").stop(true).animate({opacity:1}); //按钮鼠标经过时完全不透明 },function() { $(this).removeClass("msenter").stop(true).animate({opacity:0.6}); //按钮鼠标滑出时恢复0.6的不透明度 }); var len = $(".imgs li").length; //获取焦点图中的图片总数 var index = 0; //图片索引值默认为0 var picTimer; //声明一个时间变量备用 $(".imgs li").click(function() { //按钮的鼠标单击事件 index = $(".imgs li").index(this); //获取到被单击按钮的索引值（顺序） showPic(index); //通过showPic()函数显示该索引值的图片 }).eq(0).click(); //初始化，默认显示索引值为0（第一张）的图片 $(".imgb").hover(function() { clearInterval(picTimer); //鼠标经过大图片时停止自动播放 },function() { picTimer = setInterval(function() { showPic(index); //鼠标滑出时根据当前索引值继续自动播放 index++; //设置索引值为下一张图片 if(index==len) {index=0;} //如果索引值等于图片总数，下一次显示第一张图片 },3000); }).trigger("mouseleave"); //初始化，触发鼠标滑出事件，即自动播放 var bIsFirst=true; $("div.prev").click(function(){ if(bIsFirst){ index-=2; bIsFirst=false; if(index<0) {index=len-1;} } showPic(index); index--; if(index==-1) {index=len-1;} }); $("div.next").click(function(){ //clearInterval(picTimer); showPic(index); index++; if(index==len) {index=0;} }); function showPic(index) { $(".imgb li").removeClass("selected").eq(index).addClass("selected"); //根据index变量（索引值）给相应的大图添加selected的类，并移除其它大图的selected类 $(".imgs li").removeClass("selected").eq(index).addClass("selected");//根据index变量（索引值）给相应的按钮添加selected的类，并移除其它按钮的selected类 } });
你试试吧，DEMO：
http://jscode.chinacxy.com/code/c71cc0bc62fb89d90b9827c0488fe3dd.aspx
@artwl: 十分感谢！！！成了！
其他回答(1)
