求帮忙解决封装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);

 

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

 

正确图片如下图:

你可能感兴趣的:(jquery)