自己写的简单的图片列表按钮点击上下左右滚动切换JS

向左

向右

向左

向右

HTML

View Code

<html>
    <head>
        <title>滚动列表</title>
        <style type="text/css">
            body,ul,li,p,div {
                padding:0;
                margin:0;
                list-style:none;
                font-size:12px;
            }
            #tool {
                position:relative;
                margin:0 auto;
                overflow:hidden;
                width:690px;
            }
            #list {
                width:640px;
                height:110px;
                overflow:hidden;
                margin:0 auto;
                position:relative;
                
            }
            .wrap {
                position: relative;
                width: 99999px;
                
            }
            .wrap ul {
                overflow:hidden;
                position: absolute;
                left:0;
            }
            .wrap li {
                float:left;
                display: inline;
                position: relative;
                width:128px;
            }
            .wrap li img{
                display:block;
                margin:0 auto;
                width:120px;
                height:100px;
            }
    
            .left,.right{
                top:20px;
                position:absolute;
                background:url(http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_arrow.png);
                text-indent:999em;
                width:20px;
                height:40px;
                font-size:1px;
                cursor:pointer;
                overflow:hidden;
            }
            .right {
                right:0;
                background-position:0  -21px;
            }
            .left {
                left:0;
            }
            .left.left-dis,.right.right-dis{
                cursor:default;
            }
            
            
            #tool2 {
                position:relative;
                margin:0 auto;
                overflow:hidden;
                width:120px;
                height:370px;
            }
            #list2 {
                width:120px;
                height:324px;
                overflow:hidden;
                margin-top:28px;
                position:relative;
                
            }
            .wrap2 {
                position: relative;
                height: 99999px;
                
            }
            .wrap2 ul {
                overflow:hidden;
                position: absolute;
                top:0;
            }
            .wrap2 li {
                position: relative;
                width:120px;
                height:108px;
            }
            .wrap2 li img{
                display:block;
                margin:0 auto;
                width:120px;
                height:100px;
            }
    
            .bot,.top{
                left:40px;
                width:40px;
                height:20px;
                position:absolute;
                background:url(http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_arrow.png) no-repeat;
                text-indent:999em;
                font-size:1px;
                cursor:pointer;
            }
            
            .bot {
                bottom:0;
                background-position:-44px -21px;
            }
            .top {
                top:0;
                background-position:-44px 0;
            }
            .top.top-dis,.bot.bot-dis{
                cursor:default;
            }
            
            
            
        </style>
    </head>
    <body>
        <div id="tool">
            <div id="list">
                <div class="wrap">
                    <ul>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left">向左</div>
            <div class="right">向右</div>
        </div>
        
        <div id="tool2">
            <div id="list2">
                <div class="wrap2">
                    <ul>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="http://images.cnblogs.com/cnblogs_com/blackwood/416364/o_1.jpg" alt="" />
                        </li>
                    </ul>
                </div>
            </div>
            <div class="top">向左</div>
            <div class="bot">向右</div>
        </div>
        <script type="text/javascript" src="http://s2.ppsimg.com/t_images/t2/core/js/jquery.min.js?v=20121026"></script>
        <script type="text/javascript" src="my js/scrollList.js"></script>
        <script type="text/javascript">
            var config = {
                btn:{
                    left:$(".left"),
                    right:$(".right")
                },
                disClass: {
                    left: "left-dis",
                    right: "right-dis"
                },
                wrapLength: $("#list").width(),
                listLength: $("#list ul").width(),
                $list: $("#list .wrap ul")
            };
            $("#tool").delegate(".left","click",function(){
                scrollList(config,"left");
            }).delegate(".right","click",function(){
                scrollList(config,"right");
            });
            
            var config2 = {
                btn:{
                    top:$(".top"),
                    bot:$(".bot")
                },
                disClass: {
                    top: "top-dis",
                    bot: "bot-dis"
                },
                wrapLength: $("#list2").height(),
                listLength: $("#list2 ul").height(),
                $list: $("#list2 .wrap2 ul")
            };
            $("#tool2").delegate(".top","click",function(){
                scrollList(config2,"top");
            }).delegate(".bot","click",function(){
                scrollList(config2,"bot");
            });
        </script>
    </body>
</html>

执行代码

View Code

var config = {
                btn:{
                    left:$(".left"),
                    right:$(".right")
                },
                disClass: {
                    left: "left-dis",
                    right: "right-dis"
                },
                wrapLength: $("#list").width(),
                listLength: $("#list ul").width(),
                $list: $("#list .wrap ul")
            };
            $("#tool").delegate(".left","click",function(){
                scrollList(config,"left");
            }).delegate(".right","click",function(){
                scrollList(config,"right");
            });

var config2 = {
                btn:{
                    top:$(".top"),
                    bot:$(".bot")
                },
                disClass: {
                    top: "top-dis",
                    bot: "bot-dis"
                },
                wrapLength: $("#list2").height(),
                listLength: $("#list2 ul").height(),
                $list: $("#list2 .wrap2 ul")
            };
            $("#tool2").delegate(".top","click",function(){
                scrollList(config2,"top");
            }).delegate(".bot","click",function(){
                scrollList(config2,"bot");
            });

scrollList.js

View Code

/*滚动列表*/
function scrollList(config,type){
    var $list = config.$list;
    var wrapLength = config.wrapLength;
    var listLength = config.listLength;
    var btn = config.btn;
    var disClass = config.disClass;
    switch (type) {
        case "left" :
            var left = parseInt($list.css("left"));
            var scrollLeft;
            if(left+wrapLength>=0){
                scrollLeft = 0;
                btn.left.addClass(disClass.left);
            } else {
                scrollLeft = left+wrapLength;
                btn.right.removeClass(disClass.right);
            }
            $list.animate({left :scrollLeft});
            break;
        case "right" : 
            var left = parseInt($list.css("left"));
            var scrollLeft;
            if(listLength+left-wrapLength<wrapLength){
                scrollLeft = -(listLength-wrapLength);
                btn.right.addClass(disClass.right);
            } else {
                scrollLeft = left-wrapLength;
                btn.left.removeClass(disClass.left);
            }
            $list.animate({left :scrollLeft});
            break;
        case "top" :
            var top = parseInt($list.css("top"));
            var scrollTop;
            if(top+wrapLength>=0){
                scrollTop = 0;
                btn.top.addClass(disClass.top);
            } else {
                scrollTop = top+wrapLength;
                btn.bot.removeClass(disClass.bot);
            }
            $list.animate({top :scrollTop});
            break;
        case "bot" :
            var top = parseInt($list.css("top"));
            var scrollTop;
            if(listLength+top-wrapLength<wrapLength){
                scrollTop = -(listLength-wrapLength);
                btn.bot.addClass(disClass.bot);
            } else {
                scrollTop = top-wrapLength;
                btn.top.removeClass(disClass.top);
            }
            $list.animate({top :scrollTop});
            break;
        default:
        return;
    }
};

posted @ 2013-03-06 17:43 木头小木头阅读(1686) 评论(6) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

做个有担当的前端开发攻城狮

每天学习一点点，坚持别放弃

自己写的简单的图片列表按钮点击上下左右滚动切换JS

公告

做个有担当的前端开发攻城狮

每天学习一点点，坚持别放弃

自己写的 简单的图片列表按钮点击上下左右滚动切换JS

公告

自己写的简单的图片列表按钮点击上下左右滚动切换JS