热门标签：

jquery模仿百度图片幻灯浏览效果

浏览量：作者：未知来源：博客园

使用jquery来实现百度图片幻灯浏览，先看下效果图：

第一种实现方式，缺点是当浏览到靠后面的图片时页面动态加载元素太多，不支持大数据，完整代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImgShow.aspx.cs" Inherits="testbaidu_ImgShow" %>

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

    <link href="css/Style.css" rel="stylesheet" type="text/css" />

    <script src="../JavaScript/JQuery/Jquery.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        var count = 9; //总记录数

        var showCount = 4; //每页显示数

        var pageIndex = 0; //当前页码

        var pageCount = 10; //每页加载数

        var i = 0; //当前翻转值,不能大于总数减去每页数

        var myTimepre; //向上定时器

        var myTimenext; //向下定时器i



        //传入值

        var posti=7;

        var postion=2;//每次定位到第二个



        //状态初始化

        $(function() {

            SetPosition();

            SetSliderPreClass(false);

            SetSlidereNextClass(false);



            //处理向上按钮事件

            $("#slidePre").click(function() {

                PreDel();

            });

            //处理向上按钮事件

            $("#slidePre").mousedown(function() {

                myTimepre = window.setInterval(function() {

                    PreDel();

                }, 120);

            });

            //关闭

            $("#slidePre").mouseup(function() {

                window.clearInterval(myTimepre);

            });

            //处理向下按钮事件

            $("#slideNext").click(function() {

                NextDel();

            });

            //处理向下按钮事件

            $("#slideNext").mousedown(function() {

                myTimenext = window.setInterval(function() {

                    NextDel();

                }, 120);

            });

            //关闭

            $("#slideNext").mouseup(function() {

                window.clearInterval(myTimenext);

            });

            //鼠标移动到按钮的事件

            $("#slidePre").hover(function() { SetSliderPreHoverClass(); }, function() { SetSliderPreClass(); });

            $("#slideNext").hover(function() { SetSliderNextHoverClass(); }, function() { SetSlidereNextClass(); });

            //select



        });



        function TrggleEvent()

        {

            $("#imgList p").click(function() {

                //alert("oh yes");



              posti=  $("#imgList p").index($(this));

              SetPosition();



              SetSliderPreClass(false);

              SetSlidereNextClass(false);

                //alert($(this).attr("class"));

            });

        }





        //向上按钮点击函数

        function PreDel() {

            if (i > 0) {

                i--; showImg(i);

                SetSliderPreClass(true);

                SetSlidereNextClass(false);

            }

        }

        function NextDel() {

            if (i < count - showCount) {

                i++;

                LoadData()

                showImg(i);

                SetSlidereNextClass(true);

                SetSliderPreClass(false);

            }

        }

        //设置正常状态下向上按钮样式

        function SetSliderPreClass(isclick) {

            if (i > 0) {

                if (!isclick) {

                    $("#slidePre").removeClass();

                    $("#slidePre").addClass("preNormal");

                }

            }

            else {

                $("#slidePre").removeClass();

                $("#slidePre").addClass("preNone");

            }

        }

        //设置正常状态下向下按钮样式

        function SetSlidereNextClass(isclick) {

            if (i >= count - showCount) {

                $("#slideNext").removeClass();

                $("#slideNext").addClass("nextNone");

                $("#ImgOn").removeClass().addClass("lastPage");

            }

            else {

                if (!isclick) {

                    $("#slideNext").removeClass();

                    $("#slideNext").addClass("nextNormal");

                    $("#ImgOn").removeClass().addClass("nextPage");

                }

            }

        }

        //设置鼠标滑动下向上按钮样式

        function SetSliderPreHoverClass() {

            if ($("#slidePre").attr("class") != "preNone") {

                $("#slidePre").removeClass();

                $("#slidePre").addClass("preHover");

            }

        }

        //设置鼠标滑动下向上按钮样式

        function SetSliderNextHoverClass() {

            if ($("#slideNext").attr("class") != "nextNone") {

                $("#slideNext").removeClass();

                $("#slideNext").addClass("nextHover");

            }

        }

        // 关键函数：通过控制top ，来显示不通的幻灯片

        function showImg(i) {

            $("#imgList").stop(true, false).animate({ top: -125 * i }, 120);

        }

        function LoadData() {

            var tempindex=0;

            if (pageIndex * pageCount - showCount < i) {

                //动态先添加数据,计算需要加载的条数

                var curLoadCount = 0;

                if ((count - pageIndex * pageCount) / pageCount > 1) {

                    curLoadCount = pageCount;

                }

                else

                { curLoadCount = count % pageCount; }

                for (k = 0; k < curLoadCount; k++) {

                    $('<p class="noselect"><img  src="images/loadTree.gif" /></p>').appendTo($("#imgList"));

                }

                tempindex =pageIndex;

//                $.get("ImgContent.aspx",{ pageIndex: pageIndex, pageCount: pageCount }, function(imgurls){

//                retarr=imgurls.split(',');

//                  for (k = 0; k < curLoadCount; k++) {

//                   $("#imgList p").eq(tempindex * pageCount+k).find("img").attr("src",retarr[k]);

//                }

//

//                //绑定后台数据

//                });

                $.ajax({

                       type: "get",

                       url: "ImgContent.aspx",

                       data: "pageIndex="+ pageIndex+"&pageCount="+pageCount,

                       async: false,

                       success: function(imgurls){

                                    retarr=imgurls.split(',');

                                      for (k = 0; k < curLoadCount; k++) {

                                       $("#imgList p").eq(tempindex * pageCount+k).find("img").attr("src",retarr[k]);

                                    }

                         }

                        });

                TrggleEvent();

                pageIndex++;

                LoadData();

            }

        }



        //初始化定位

        function SetPosition()

        {

        if(posti+1-(showCount-postion)>0&&posti+1-(showCount-postion)<count-showCount)

        {

            i=posti+1-(showCount-postion);

        }

        else if(posti+1-(showCount-postion)>=count-showCount)

        {

            i=count-showCount;

        }

        LoadData();

        $("#imgList p").eq(posti).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');

        showImg(i);

        $("#ImgOn").attr("src",$("#imgList p").eq(posti).find("img").attr("src"));

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div style="text-align: center">

        <h1>

            百度图片浏览模拟程序</h1>

    </div>

    <div id="imgContainer">

        <div id="detailImg">

            <table id="imgFrom" cellpadding="0" cellspacing="0" style="margin: 0 auto;">

                <tr>

                    <td style="text-align: center">

                        图片名称：

                    </td>

                </tr>

            </table>

            <table id="picWrap">

                <tr>

                    <td id="srcPic" align="center" valign="middle">

                        <img id="ImgOn" src="" width="600px" height="450px" />

                    </td>

                </tr>

            </table>

            <table id="picInfo">

                <tr>

                    <td width="38%" align="left">

                        <span id="imgTitle" style="font-size: 12px"></span>

                    </td>

                    <td align="right">

                        <span class="rate">预览图比例：<span class="fontBar" id="rate"></span></span>

                    </td>

                    <td style="width: 70px" align="left">

                        <a href="javascript:void(0)" class="zoomsrc" id="zoomSrc">查看原图</a>

                    </td>

                </tr>

            </table>

        </div>

        <div id="album">

            <div id="slidePre" class="preNormal">

                 

            </div>

            <div id="smallImgs">

                <div id="imgList">

                </div>

            </div>

            <div id="slideNext">

                 

            </div>

        </div>

    </div>

    </form>

</body>

</html>

第二种，动态加载数据，当然js局部可以做出修改（完整示例代码如下）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImgSlider2.aspx.cs" Inherits="testbaidu_ImgSlider2" %>

<!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 id="Head1" runat="server">

    <title>模拟百度图片浏览</title>

    <link href="css/Style.css" rel="stylesheet" type="text/css" />

    <script src="../JavaScript/JQuery/Jquery.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        var showCount = 4//每页显示数

        var count = 9; //总记录数

        var postion = 2; //每次定位到第二个

        var i = 0; //轮转值

        //传入值

        var postindex = 6;

        var loadStart = 0;

        var loadEnd = 0;

        var myTimepre; //向上定时器

        var myTimenext; //向下定时器i

        //第一次计算仅仅是初始化计算

        function setLoadStartAndEnd() {

            //为了便于理解没有进行等式的简化

            //只显示当前页的图片

            if (postindex + 1 - postion > 0 && postindex <= count - showCount) {

                loadStart = postindex - postion + 1;

                loadEnd = postindex - postion + showCount;

            }

            //向下按钮为灰色

            else if (postindex > count - showCount) {

                loadStart = count - showCount;

                loadEnd = count - 1;

            }

            //向上按钮为灰色

            else if (postindex + 1 - postion <= 0) {

                loadStart = 0;

                loadEnd = showCount - 1;

            }

        }

        //计算出数值后开始加载数据

        function loadData() {

            //            alert(loadStart);

            //            alert(loadEnd);

            $("#imgList").html("");

            for (j = loadStart; j <= loadEnd; j++) {

                $('<p class="noselect"><img imgindex="' + j + '"  src="../temp/' + j + '.jpg" /></p>').appendTo($("#imgList"));

            }

            TrggleEvent();

            //alert($("#imgList").html());

        }

        //设置正常状态下向上按钮样式

        function SetSliderPreClass(isclick) {

            if (loadStart > 0) {

                if (!isclick) {

                    $("#slidePre").removeClass();

                    $("#slidePre").addClass("preNormal");

                }

            }

            else {

                $("#slidePre").removeClass();

                $("#slidePre").addClass("preNone");

            }

        }

        //设置正常状态下向下按钮样式

        function SetSlidereNextClass(isclick) {

            if (loadEnd >= count - 1) {

                $("#slideNext").removeClass();

                $("#slideNext").addClass("nextNone");

                $("#ImgOn").removeClass().addClass("lastPage");

            }

            else {

                if (!isclick) {

                    $("#slideNext").removeClass();

                    $("#slideNext").addClass("nextNormal");

                    $("#ImgOn").removeClass().addClass("nextPage");

                }

            }

        }

        //设置鼠标滑动下向上按钮样式

        function SetSliderPreHoverClass() {

            if ($("#slidePre").attr("class") != "preNone") {

                $("#slidePre").removeClass();

                $("#slidePre").addClass("preHover");

            }

        }

        //设置鼠标滑动下向上按钮样式

        function SetSliderNextHoverClass() {

            if ($("#slideNext").attr("class") != "nextNone") {

                $("#slideNext").removeClass();

                $("#slideNext").addClass("nextHover");

            }

        }

        function PreDel() {

            if (loadStart > 0) {

                temp = $("#imgList").html();

                $("#imgList").html("");

                $('<p class="noselect"><img alt="" imgindex="' + (loadStart - 1) + '"  src="../temp/' + (loadStart - 1) + '.jpg" /></p>').appendTo($("#imgList"));

                $(temp).appendTo($("#imgList"));

                temp = "";

                $("#imgList").css("top", "-125");

                postindex--;

                loadStart--;

                loadEnd--;

                $("#imgList").stop(true, false).animate({ top: 0 }, 120);

                window.setTimeout(function() {

                    $("#imgList p").eq(4).remove();

                    SetSliderPreClass(true);

                    SetSlidereNextClass(false);

                    TrggleEvent();

                }, 120);

            }

        }

        function NextDel() {

            if (loadEnd < count - 1) {

                $('<p class="noselect"><img alt="" imgindex="' + (loadEnd + 1) + '" src="../temp/' + (loadEnd + 1) + '.jpg" /></p>').appendTo($("#imgList"));

                postindex++;

                loadStart++;

                loadEnd++;

                $("#imgList").stop(true, false).animate({ top: -125 }, 120);

                window.setTimeout(function() {

                $("#imgList").css("top", "0");

                    $("#imgList p").eq(0).remove();

                    SetSliderPreClass(false);

                    SetSlidereNextClass(true);

                    TrggleEvent();

                }, 150);

            }

        }

        $(function() {

            setLoadStartAndEnd();

            loadData();

            SetPosition();

            //鼠标移动到按钮的事件

            $("#slidePre").hover(function() { SetSliderPreHoverClass(); }, function() { SetSliderPreClass(false); });

            $("#slideNext").hover(function() { SetSliderNextHoverClass(); }, function() { SetSlidereNextClass(false); });

            SetSliderPreClass(false);

            SetSlidereNextClass(false);

            //处理向上按钮事件

            $("#slidePre").click(function() {

                if ($("#slidePre").attr("class") != "preNone") {

                    PreDel();

                }

            });

            //处理向上按钮事件

            $("#slidePre").mousedown(function() {

                myTimepre = window.setInterval(function() {

                    PreDel();

                }, 150);

            });

            //关闭

            $("#slidePre").mouseup(function() {

                window.clearInterval(myTimepre);

            });

            //处理向下按钮事件

            $("#slideNext").click(function() {

                if ($("#slideNext").attr("class") != "nextNone") {

                    NextDel();

                }

            });

            //处理向下按钮事件

            $("#slideNext").mousedown(function() {

                myTimenext = window.setInterval(function() {

                    NextDel();

                }, 150);

            });

            //关闭

            $("#slideNext").mouseup(function() {

                window.clearInterval(myTimenext);

            });

        });

        function SetPosition() {

            //为了便于理解没有进行等式的简化

            //只显示当前页的图片

            if (postindex + 1 - postion > 0 && postindex <= count - showCount) {

                $("#imgList p").eq(1).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');

                $("#ImgOn").attr("src", $("#imgList p").eq(1).find("img").attr("src"));

            }

            //向下按钮为灰色

            else if (postindex > count - showCount) {

                $("#imgList p").eq(postindex - (count - showCount)).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');

                $("#ImgOn").attr("src", $("#imgList p").eq(postindex - (count - showCount)).find("img").attr("src"));

            }

            //向上按钮为灰色

            else if (postindex + 1 - postion <= 0) {

                //alert(postindex);

                $("#imgList p").eq(postindex).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');

                $("#ImgOn").attr("src", $("#imgList p").eq(postindex).find("img").attr("src"));

            }

        }

        function TrggleEvent() {

            //选中图片的处理程序

            $("#imgList p").click(function() {

                //alert($(this).find("img").attr("imgindex"));

                postindex = parseInt($(this).find("img").attr("imgindex"));

                setLoadStartAndEnd();

                loadData();

                SetPosition();

                SetSliderPreClass(false);

                SetSlidereNextClass(false);

            });

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div style="text-align: center">

        <h1>

            百度图片浏览模拟程序</h1>

    </div>

    <div id="imgContainer">

        <div id="detailImg">

            <table id="imgFrom" cellpadding="0" cellspacing="0" style="margin: 0 auto;">

                <tr>

                    <td style="text-align: center">

                        图片名称：

                    </td>

                </tr>

            </table>

            <table id="picWrap">

                <tr>

                    <td id="srcPic" align="center" valign="middle">

                        <img id="ImgOn" src="" width="600px" height="450px" />

                    </td>

                </tr>

            </table>

            <table id="picInfo">

                <tr>

                    <td width="38%" align="left">

                        <span id="imgTitle" style="font-size: 12px"></span>

                    </td>

                    <td align="right">

                        <span class="rate">预览图比例：<span class="fontBar" id="rate"></span></span>

                    </td>

                    <td style="width: 70px" align="left">

                        <a href="javascript:void(0)" class="zoomsrc" id="zoomSrc">查看原图</a>

                    </td>

                </tr>

            </table>

        </div>

        <div id="album">

            <div id="slidePre" class="preNormal">

                 

            </div>

            <div id="smallImgs">

                <div id="imgList">

                </div>

            </div>

            <div id="slideNext" class="nextNormal">

                 

            </div>

        </div>

    </div>

    </form>

</body>

</html>

经典推荐

最近更新

jquery模仿百度图片幻灯浏览效果

更多...好站/酷站