图片预览

来源：互联网发布：网易云信短信 php 编辑：程序博客网时间：2024/04/28 03:37

图片预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <title></title>
    <style type="text/css">
    #div1{ width:690px; height:472px; margin-left:300px; background-image:url('images/1.jpg')}
    #div2{ width:345px; height:472px; float:left;}
    #div3{ width:345px; height:472px; float:right;}
    #div4{ width:690px; height:120px; margin-left:300px; margin-top:15px;}
    #imageleft{ width:30px; height:27px; float:left; margin-top:230px; display:none;}
    #imageright{ width:30px; height:27px; float:right; margin-top:230px; display:none;}
    #imgshang{ width:27px; height:74px; float:left;}
    #imgxia{ width:27px; height:74px; float:right;}
    ul{ float:left; margin:0px;}
    ul li{ list-style-type:none; float:left; margin:10px; margin-left:0px;}
    </style>
    <script type="text/javascript">
        $(function () {
            var array = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg');
            var count = 0;
            $('#div1').css('background-image', 'url(images/' + array[count] + ')');
            $('#imageright').bind('click', function () {
                count++;
                //如果count大于数组的最大下标，则归零，继续循环
                if (count > (array.length - 1)) {
                    count = 0;
                }
                //无论是否满足上面的if条件，都会执行
                $('#div1').css('background-image', ('url(images/' + array[count] + ')'));
            })
            $('#imageleft').bind('click', function () {
                count--;
                //如果count大于数组的最大下标，则归零，继续循环
                if (count < 0) {
                    count = array.length - 1;
                }
                //
                $('#div1').css('background-image', ('url(images/' + array[count] + ')'));
            })

            //初始化img控件
            /*
            $('img').bind('click', function () {
            count++;
            //如果count大于数组的最大下标，则归零，继续循环
            if (count > (array.length - 1)) {
            count = 0;
            }
            //无论是否满足上面的if条件，都会执行
            $(this).attr('src','images/'+array[count]);
            })
            */

            //当鼠标移到div2中时，左箭头出来
            $('#div2').hover(function () {
                $('#imageleft').show();
            })
            //当鼠标离开div2时，左箭头隐藏
            $('#div2').mouseleave(function () {
                $('#imageleft').hide();
            })
            //当鼠标移到div3中时，右箭头出来
            $('#div3').hover(function () {
                $('#imageright').show();
            })
            //当鼠标离开div3时，右箭头隐藏
            $('#div3').mouseleave(function () {
                $('#imageright').hide();
            })

            //动态添加li里面的小图片
            function smallimage() {
                var str = "";
                for (var i = 0; i < array.length; i++) {
                    //连接字符串，图片路径
                    str = str + "<li><img src='images/" + array[i] + "'width=100px height=100px/></li>";
                }
                return str;
            }
            $('#ul1').append(smallimage());
            //li里面显示5张小图片
            $('#ul1 li:gt(4)').hide();

            //上一组图片
            var num = 0;
            $('#imgshang').click(function () {
                num--;
                $("#ul1 li").hide();
                if (num < 0) {
                    num = array.length - 1;
                }
                for (var i = num; i < 5 + num; i++) {
                    $("#ul1 li:eq(" + i + ")").show();
                }

            })
            //下一组图片
            $('#imgxia').click(function () {
                num++;
                $('#ul1 li').hide();
                if (num > array.length - 1) {
                    num = 0;
                }
                else {
                    for (var i = num; i < 5 + num; i++) {
                        $("#ul1 li:eq(" + i + ")").show();
                    }
                }
            })

            $('#ul1 li img').click(function () {
                var src = $(this).attr('src');
                $('#div1').css('background-image', ("url(" + src + ")"));
                $.grep(array, function (val, key) {
                    if (val == src.split('/')[1]) {
                        count = key;
                    }
                });
            })

})
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<img src="images/left.jpg" alt="1" id="imageleft" />
</div>
<div id="div3">
<img src="images/right.jpg" alt="2" id="imageright" />
</div>
</div>
<div id="div4">
<img src="images/shang.gif" id="imgshang" />
<img src="images/xia.gif" id="imgxia"/>
<ul id="ul1"></ul>
</div>
</body>
</html>