jquery 相册展示，带点击，带小图展示 (2)修改篇

浏览数：17 / 时间：2015年06月09日

在之前的demo上，我再修改了一下。

具体添加的内容是：添加多一种效果，让用户可以选择向左滚动还是向右滚动，当然还有其他的效果也可以加进来。但是还没实现。只是将现在做好的发上来，后期再修改了，再写一篇随笔就好了。

<!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>
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    *{ margin:0px; padding:0px;}
    img{ border:0px;}
    .home
    {
         width:720px; 
         height:420px;
         margin:0 auto;
         position:relative;
         overflow:hidden;
        }
    .home_01
    {
         width:720px; 
         height:360px;
         overflow:hidden !important;
         position:absolute;
         top:0px;
         left:0px;
         z-index:9999;
        }
    .home_01_pic
    {
        width:2880px; 
        height:360px;
        position:absolute;
        top:0px;
        left:0px;
        }
    .home_01_pic ul li
    {
        width:720px; 
        height:360px;
        display:inline;
        float:left;
        }
      .home_01_pic ul li a img
    {
        width:720px; 
        height:360px;
        }
    .home_02
    {
         width:720px; height:50px;
         padding-top:10px;
        }
    .home_left
    {
         width:30px;
         height:50px;
         background:url(images/all.png) -180px -40px no-repeat;
         float:left;
         cursor:pointer;
        }
    .home_right
{
        width:30px;
        height:50px;
        background:url(images/all.png) -210px -40px no-repeat;
        float:right;
        cursor:pointer;
    }
.s_Pic
{
    width:660px;
    height:50px;
    float:left;
    }
.s_Pic ul li
{
     width:163px;
     height:50px;
     float:left;
     display:inline;
     text-align:center;
    }
.s_Pic ul li a img
{
     width:130px;
     height:48px;
     float:left;
     display:inline;
     margin-left:15px;
     border:1px solid gray;
    }
.on
{
    border:1px solid red !important;
    }
    </style>
</head>
<body>
    <div class="home">
        <div style=" height:360px; width:720px;"></div>
        <div class="home_01">
            <div class="home_01_pic">
                <ul class="home_ul">
                    <li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
                </ul>
            </div>
        </div>
        <div class="home_02">
            <div class="home_left"></div>
            <div class="s_Pic">
                <ul class="smallPic">
                    <li><a href="#"><img src="images/s1.jpg" alt="" class="simg"/></a></li>
                    <li><a href="#"><img src="images/s2.jpg" alt="" class="simg"/></a></li>
                    <li><a href="#"><img src="images/s3.jpg" alt="" class="simg"/></a></li>
                    <li><a href="#"><img src="images/s4.jpg" alt="" class="simg"/></a></li>
                </ul>
            </div>
            <div class="home_right"></div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $.fn.scroll = function (options) {
                $.fn.scroll.options = {
                    effect: "left", //left:向左 top 向上 leftMarquee向上无缝滚动
                    delayTime: 500,//图片滚动速度
                    cellWidth:720,//大图片的宽度
                    cellHeitht:360,//大图片的高度
                    speed:3000 //图片更换间隔

                };
                var o = $.extend({}, $.fn.scroll.options, options || {});
                var home_pic = $(o.bigPic),
                    small_Pic = $(o.smallPic),
                    leftBtn = $(o.left_btn),
                    rightBtn = $(o.right_btn);
                var Index = 0, timer = null;
                //大图片移动函数
                var move = function (Index) {
                    switch (o.effect) {
                        case "left":
                            leftMove(Index);
                            break;
                        case "top":
                            topMove(Index);
                            break;
                    }

                };
                //向左滚动函数
                var leftMove = function (Index) {
                    home_pic.stop().animate({ left: -(Index * o.cellWidth) + "px" }, o.delayTime, function () {
                        smallPicHide();
                        smallPicShow(Index);
                    });
                };
                //向上滚动函数
                var topMove = function (Index) {
                    home_pic.css("width", "720px").css("height", "1440px");
                    home_pic.stop().animate({ top: -(Index * o.cellHeitht) + "px" }, o.delayTime, function () {
                        smallPicHide();
                        smallPicShow(Index);
                    });
                };
                //初始化函数 
                var init = function () {
                    home_pic.hover(function () {
                        clearInterval(timer);
                    }, function () {
                        start();
                    }).trigger("mouseleave");
                };
                //开始滚动
                var start = function () {
                    timer = setInterval(function () {
                        move(Index);
                        Index++;
                        if (Index > 3) {
                            Index = 0;
                        }
                    }, o.speed);
                }
                //小图片显示边框
                var smallPicShow = function (Index) {
                    small_Pic.children("li").eq(Index).find(".simg").addClass("on");
                }
                //小图片隐藏边框
                var smallPicHide = function () {
                    small_Pic.children("li").find(".simg").removeClass("on");
                };

                //初始化
                init();
                //点击向左事件
                leftBtn.click(function () {
                    if (Index == 0) {
                        Index = 4;
                    }
                    clearInterval(timer);
                    move(--Index);
                    start();
                });
                //点击向右事件
                rightBtn.click(function () {
                    if (Index == 3) {
                        Index = -1;
                    }
                    clearInterval(timer);
                    move(++Index);
                    start();
                });
            };

            //页面加载
            $(window).load(function () {
                $(".home").scroll({
                    bigPic: ".home_01_pic",
                    smallPic: ".smallPic",
                    left_btn: ".home_left",
                    right_btn: ".home_right",
                    effect:"left",
                    delayTime:500
                });
            });
        });
    </script>
</body>
</html>