实现点上下左右按钮，小图切换，点小图显示大图的效果

最新推荐文章于 2016-09-29 20:47:00 发布

weixin_30823227

最新推荐文章于 2016-09-29 20:47:00 发布

阅读量335

点赞数

文章标签： javascript java 移动开发 ViewUI

原文链接：http://www.cnblogs.com/ggbd-lie/archive/2013/05/26/3100479.html

版权

//实现点上下左右按钮，小图切换，点小图显示大图的效果

如图：

代码如下：

<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函数里运行就好了

转载于:https://www.cnblogs.com/ggbd-lie/archive/2013/05/26/3100479.html

weixin_30823227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现点上下左右按钮，小图切换，点小图显示大图的效果

//实现点上下左右按钮，小图切换，点小图显示大图的效果如图：代码如下：<html> <head> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script> //实...
复制链接

扫一扫