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

类似下面的效果：

<!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>

权当记录

相关阅读:
oracle trunc()函数的用法——日期、数字
 ORACLE定时任务时间间隔设置
 Oracle JOB 间隔时间详解
 "规格"与"数量"的英文缩写是什么
 “金额”“合计”用英语怎么说？有什么区别么？
关于狼性的团队励志名言警句
 5篇关于职场技巧的励志文章
 菜单权限分配源码奉送V2.0
安装 SQL Server 客户端驱动程序
 一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）
原文地址：https://www.cnblogs.com/floweres/p/9428791.html

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

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