实现点上下左右按钮，小图切换，点小图显示大图的效果
//实现点上下左右按钮，小图切换，点小图显示大图的效果
如图：
代码如下：
<html> <head> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script> //实现点上下左右按钮，小图切换，点小图显示大图的效果 $(function(){ var left = $(".left"); //左按钮 var right = $(".right"); //右按钮 var up = $(".up"); //上按钮 var down = $(".down"); //下按钮 var arr=$(".slide-box a"); //小图组 var box = $(".slide-box"); //整个存放小图的容器 var target = $("#img-box img"); //大图存放的img标签 var slide = function(up,right,down,left,arr,box,target){ var n=0; var h = arr.outerHeight(); var len = arr.length; var clickEvent=function(){ var href = arr.eq(n).attr('href'); target.attr("src",href); return false; } arr.click(function(){ n = arr.index(this); var b = clickEvent(n); return b; }); var move = function(){ if(n<0){ n=0; }else if(n>len-1){ n=len-1; }else{ box.stop().animate({"top":-n*h+"px"}); } } up.click(function(){ n--; move(); }); down.click(function(){ n++; move(); }); left.click(function(){ n--; move(); clickEvent(); }); right.click(function(){ n++; move(); clickEvent(); }); } slide(up,right,down,left,arr,box,target); }); </script> <style> *{ margin: 0; padding: 0;} body{ font-size: 12px;} #wrap{ width: 800px; height: 300px; border: 5px solid #000; margin: 100px auto; position: relative;} #img-box{ height: 300px; overflow: hidden;} #img-box span{ width: 50px; height: 300px; line-height: 300px; text-align: center; cursor: pointer; display: inline-block; background: #ccc; float: left;} #img-box img{ float: left;} #right{ height: 300px; width: 140px; position: absolute; right: 0; top: 0;} #right span{ width: 140px; height: 20px; float: left; line-height: 20px; text-align: center; background: #ccc; cursor: pointer;} #imgs{ width: 140px; height: 260px; float: left; overflow: hidden; position: relative;} .slide-box{ width: 140px; position: absolute;} .slide{ padding: 10px 0; width: 140px; height: 105px; display: block;} </style> </head> <body> <div id="wrap"> <div id="img-box"> <span class="left">左</span> <img src="images/1.jpg" alt=""> <span class="right">右</span> </div> <div id="right"> <span class="up">上</span> <div id="imgs"> <div class="slide-box"> <a href="images/1.jpg" class="slide"><img src="images/small-1.jpg" alt=""></a> <a href="images/2.jpg" class="slide"><img src="images/small-2.jpg" alt=""></a> <a href="images/3.jpg" class="slide"><img src="images/small-3.jpg" alt=""></a> <a href="images/4.jpg" class="slide"><img src="images/small-4.jpg" alt=""></a> <a href="images/5.jpg" class="slide"><img src="images/small-5.jpg" alt=""></a> <a href="images/6.jpg" class="slide"><img src="images/small-6.jpg" alt=""></a> <a href="images/7.jpg" class="slide"><img src="images/small-7.jpg" alt=""></a> </div> </div> <span class="down">下</span> </div> </div> </body> </html>
只要定义几个参数，然后传入slide函数里运行就好了
