求帮忙解决封装jquery图片滚动问题

    今天用jquery封装了点击图片滚动，但是发现在屏幕自适应时，图片停在的位置会随着屏幕大小而错位（我引入了pocketgrid.css响应式文件，但没办法去那边修改onsize事件。。。），求大神。。。求大神。。。

    以下是我的代码和图片错位图：

一、html+代码。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="http://static1.cdn.1happy.com/assets/base/reset.css"/>
        <link rel="stylesheet" href="http://static1.cdn.1happy.com/assets/base/pocketgrid.css"/>
        <script type="text/javascript" src="http://static1.cdn.1happy.com/assets/lib/jquery-1.10.2.js"></script>

        <script type="text/javascript" src="../wz/jquery.slide.js"></script>
　　　　 <style type="text/css">
            body {
                background: #13141c url("images/ys_bg.jpg") no-repeat top center;
            }
　　　　　　 /* 小屏幕设置 */
            @media (min-width: 0px) {
                /* slide滑动图片 */
                .slide {width: 350px;}
            }

            /* 大屏幕设置 */
            @media (min-width: 1280px) {
                /* slide滑动图片 */
                .slide {width: 465px;}
            }
　　　　　　/*滚动图片*/
            .slide,.tutorial {position: relative; float: right; overflow: hidden;}
            .slide-tab {width: 100%; height: 290px; overflow: hidden; }
            .slide .slide-tab ul {position: relative; width: 1420px; }
            .slide .slide-tab ul li { float: left; }
    　　</style>
　　</head>
　　<body>
    　　<!-- 滚动图片 -->
                            <div class="slide">
                                <div class="slide-tab">
                                    <ul>
                                        <li><a href="#"><img src="images/slide_1.jpg"/></a></li>
                                        <li><a href="#"><img src="images/slide_1.jpg"/></a></li>
                                        <li><a href="#"><img src="images/slide_1.jpg"/></a></li>
                                    </ul>
                                </div>
                                <div class="alter-btn">
                                    <span class="prev"></span>
                                    <span class="next"></span>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $(function(){
                                    $.slide({
                                        ownClass: "slide-tab",
                                        prevClass: "prev",
                                        nextClass: "next",
                                        moveCount: "1"
                                    });
                                });

                            </script>
</body>

 

二、封装的jquery.slide.js文件。

(function($){
    $.extend({
        slide: function(def){
            var defaults = {
                ownClass: "slide-tab", /* slide切换标签 */
                prevClass: "prev", /* 上一张图片标签 */
                nextClass: "next", /* 下一张图片标签 */
                pageCount: "1", /* 一页显示多少页图片 */
                moveCount: "1" /* 滚动时切换几张图片 */
            };

            /* 重写defaults */
            var default1 = $.extend(defaults,def);

            var page = 0;
            var own = $("."+default1.ownClass);
            var prev = $("."+default1.prevClass);
            var next = $("."+default1.nextClass);
            var moveCount = default1.moveCount;
            /* liCount为页数，减去pageCount的目的是当在最后一页时，不能在滚动了，如果最后一页还有4张图片，滚动图片为2，那么还是会再滚动一次的*/
            var liCount = Math.ceil((own.find("li").length - default1.pageCount)/moveCount);

            /* 前一张图片 */
            prev.click(function(){
                var liWidth = own.find("li").outerWidth(true);
                if(page>0){
                    page--;
                    own.find("ul").animate({"left":-page*(liWidth*moveCount)});
                }
            });

            /* 下一张图片 */
            next.click(function(){
                var liWidth = own.find("li").outerWidth(true);
                if(page<(liCount)){
                    page++;
                    own.find("ul").animate({"left":-page*(liWidth*moveCount)});
                }
            });
        }
    })

})(jQuery);

 

三、调节屏幕大小时，图片出现的错位。

 

正确图片如下图：

posted @ 2013-12-04 17:42  tattoos  阅读(637)  评论(7)    收藏  举报