图片游览效果

最新推荐文章于 2019-04-01 12:41:22 发布

wang_yuanyuan1

最新推荐文章于 2019-04-01 12:41:22 发布

阅读量384

点赞数

文章标签： border function div float button server

本文链接：https://blog.csdn.net/wang_yuanyuan1/article/details/7362981

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #large{ width:400px; height:350px; border:1px solid red; margin:60px 0px 0px 400px;}
        #large img{ width:400px; height:350px;}
        #little{ width:736px;height:100px; margin:20px 0px 0px 251px; }
        #left{ float:left; width:50px; height:100px;}
        #content{ float:left; width:625px; height:100%; margin:0px 4px 0px 4px; }
        #content img{ width:100px; height:90px; border:1px soild green; margin-left:4px;}
        #right{float:left; width:50px; height:100px;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var array = new Array('asd.jpg', 'fd.jpg', '12.jpg', 'we.jpg', 'saa.jpg', 'as4.jpg');
            //单机下面图片显示到大图片
            $('#content img').bind('click', function () {
                $('#content img').css({ width: '100px', height: '90px', border: '' });
                $(this).css({ border: '4px solid green', width: '92px', height: '82px' });
                var str = $(this).attr('src');
                $('#image').attr('src', str);
            })
            //next的运用来一下走三张图片有bug
            var count = 0;
            $('#next').bind('click', function () {
                $('#content img').css({ width: '100px', height: '90px', border: '' });
                if (count == 6) {
                alert('到头了！')
                    count = 0;
                }
                $('#img1').attr('src', $('#img4').attr('src'));
                $('#img2').attr('src', $('#img5').attr('src'));
                $('#img3').attr('src', $('#img6').attr('src'));
                $('#img4').attr('src', 'images/' + array[count]);
                count++;
                $('#img5').attr('src', 'images/' + array[count]);
                count++;
                $('#img6').attr('src', 'images/' + array[count]);
                count++;
            })
            $('#hou').click(function () {
                $('#content img').css({ width: '100px', height: '90px', border: '' });
                if (count == 6) {
                    alert('到头了！');
                    count = 0;

                }
                $('#img1').attr('src', $('#img4').attr('src'));
                $('#img2').attr('src', $('#img5').attr('src'));
                $('#img3').attr('src', $('#img6').attr('src'));
                $('#img4').attr('src', 'images/' + array[count]);
                count++;
                $('#img5').attr('src', 'images/' + array[count]);
                count++;
                $('#img6').attr('src', 'images/' + array[count]);
                count++;
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="large"><img id="image" src="images/asd.jpg" /></div>
    <div id="little">
    <div id="left"><input id="next" type="button" value="◄" style="height:90px; width:100%; font-family:@楷体; font-size:24px;" /></div>
    <div id="content">
    <img id="img1" src="images/asd.jpg"/><img id="img2" src="images/fd.jpg" /><img id="img3" src="images/12.jpg" /><img id="img4" src="images/we.jpg" /><img id="img5" src="images/saa.jpg" /><img id="img6" src="images/as4.jpg" /></div>
    <div id="right"><input id="hou" type="button" value="►" style="height:90px; width:100%; font-family:@楷体; font-size:24px;" /></div>
    </div>
    </form>
</body>
</html>

wang_yuanyuan1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片游览效果

http://www.w3.org/1999/xhtml"> #large{ width:400px; height:350px; border:1px solid red; margin:60px 0px 0px 400px;} #large img{ width:400px; height:350px;} #l
复制链接

扫一扫