jQuery高仿腾讯图片浏览器

最新推荐文章于 2019-08-29 15:59:25 发布

LeoHaiTao

最新推荐文章于 2019-08-29 15:59:25 发布

阅读量3.4k

点赞数 1

分类专栏： jQuery 文章标签： jquery 腾讯 border function div 浏览器

本文链接：https://blog.csdn.net/haitaoDoit/article/details/7358678

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="仿腾讯图片浏览器.aspx.cs" Inherits="仿腾讯图片浏览器" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        #bigimg img
        {
            width: 510px;
            height: 300px;
            padding: 0px;
        }
        #smallimg img
        {
            width: 100px;
            height: 110px;
            padding: 0px;
            margin: 2px;
        }
        #bigimg
        {
            width: 503px;
        }
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#smallimg img:eq(0)').css("border", '5px solid red'); //默认第一张图片有边框
            $('#smallimg img').click(function () {
                $('#smallimg img').css("border", "");
                $(this).css("border", '5px solid red');
                var path = $(this).attr("src");
                $('#bigimg img').attr("src", path);
            }) //单击小图片显示大图片

            $('#leftimg').click(function () {
                num--;
                if (num < 0) {
                    num = array.length - 1;
                }
                $('#bigimg img').attr('src', 'images/' + array[num]);
                $('#smallimg img').css("border", "");
                var im = $('#smallimg img');
                im.each(function (index) {
                    if ($(this).attr('src') == $('#bigimg img').attr('src')) {   //循环遍历小图片的路径(src)，当小图片的src等于大图片的src时，小图片加边框
                        $(this).css("border", '5px solid red');
                    }
                })
            }) //前一张

            $('#leftimg').show();
            $('#rightimg').show(); //开始时默认图片都显示
            $('#bigimg').mousemove(function (e) {
                if (e.originalEvent.x < 255) {   //e.originalEvent.x:div的横坐标
                    $('#leftimg').show();
                    $('#rightimg').hide();
                }
                else {
                    $('#rightimg').show();
                    $('#leftimg').hide();
                }
            })//切换箭头图片
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 303px">
        <div style="float: left">
            <img id="leftimg" src="images/left.png" alt="前一页" style=" position:absolute; top:120px; left:20px"/></div>
        <div style="float: left" id="bigimg">
            <img src="images/0.jpg" /></div>
        <div style="float: left">
            <img id="rightimg" src="images/right.png" alt="后一页" style=" position:absolute; top:120px; left:450px"/></div>
    </div>
    <div id="smallimg">
        <a href="#"><img src="images/0.jpg" /></a>
        <a href="#"><img src="images/1.jpg" /></a>
        <a href="#"><img src="images/2.jpg" /></a>
        <a href="#"><img src="images/3.jpg" /></a>
        <a href="#"><img src="images/4.jpg" /></a>
    </div>
    </form>
</body>
</html>

LeoHaiTao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery高仿腾讯图片浏览器

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> #bigimg img { width: 510px; height: 300px;
复制链接

扫一扫

专栏目录