首页 新闻 搜索 专区 学院

菜鸟求助,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/

酸番茄的主页 酸番茄 | 初学一级 | 园豆:87
提问于:2012-07-26 10:56
< >
分享
最佳答案
1

你到底是要哪个效果,是你问题中给出的还是链接里的?

收获园豆:100
artwl | 专家六级 |园豆:16536 | 2012-07-26 11:03

谢谢,问题里给出的,我贴的代码里 再增加点击图片中的左边和右边红色圈住的地方 在大图位置显示上一张和下一张的图片。

酸番茄 | 园豆:87 (初学一级) | 2012-07-26 11:06

@hinong: 你截图的网页地址是什么?

artwl | 园豆:16536 (专家六级) | 2012-07-26 11:07

@artwl: 本地的。图片可以随便用其他的。

酸番茄 | 园豆:87 (初学一级) | 2012-07-26 11:09

@artwl: 效果图就是上面代码的效果

酸番茄 | 园豆:87 (初学一级) | 2012-07-26 11:15

@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 | 园豆:16536 (专家六级) | 2012-07-26 11:48

@artwl: 十分感谢!!!成了!

酸番茄 | 园豆:87 (初学一级) | 2012-07-26 11:56
其他回答(1)
0
1565783227 | 园豆:227 (菜鸟二级) | 2014-08-18 12:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册