类似图片查看器的效果点击放大之后，可以左右点击切换图片的原理

类似下面的效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul,li{
                list-style-type: none;
            }
            .most:after{
                content: "";
                display: block;
                height: 0;
                overflow: hidden;
                clear: both;
            }
            .most{
                width: 80%;
                margin: 0 auto;
                margin-top: 50px;
            }
            .most li{
                float: left;
                width: 20%;
            }
            .most li img{
                width: 100%;;
            }
            .show{
                display: none;
            }
        </style>
    </head>
    <body>
        <!--展示的图片，需要点击的图片-->
        <ul class="most">
            <li><img src="images/main1.jpg"/></li>
            <li><img src="images/main2.jpg"/></li>
            <li><img src="images/main3.jpg"/></li>
            <li><img src="images/main4.jpg"/></li>
            <li><img src="images/main5.jpg"/></li>
        </ul>
        <!--点击之后出现的块-->
        <div class="show">
            <!--点击之后图片放在class名为text的div中-->
            <div class="text"></div>
            <a href="#" class="left">&lt;</a>
            <a href="#" class="right">&gt;</a>
        </div>
        <script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $(".most li").on('click',function(){
                    index=$(this).index();
                    $(".text").find("img").remove();
                    var ulImg=$(this).find("img").attr("src");
                    $(".show").show();
                    var addImg=$(".text").append('<img id="imgId" />');
                    var imgSrc=$("#imgId").attr("src",ulImg);
                })
                $(".left").on('click',function(){
                    if(index>0){
                        index--;
                        var activeImg=$(".most li").eq(index).find("img").attr("src");
                        $(".text").find("img").attr("src",activeImg);
                        
                    }else{
                        alert("已经是第一张了！")
                    }
                })
                $(".right").on('click',function(){
                    if(index < $(".most li").length-1){
                        index++;
                        var activeImg=$(".most li").eq(index).find("img").attr("src");
                        $(".text").find("img").attr("src",activeImg);
                    }else{
                        alert("已经是最后一张了！")
                    }
                })
            })
        </script>
    </body>
</html>

权当记录

posted on 2018-08-06 10:14 丑丑呀！阅读(243) 评论(0) 编辑收藏举报

类似图片查看器的效果 点击放大之后，可以左右点击切换图片的原理

类似图片查看器的效果点击放大之后，可以左右点击切换图片的原理