兼容IE8图片轮播

最近在做一个活动,其中产品给的需求是:一共是8张图片,开始显示2张,点击第3张,这时候页面显示3张。中间为大图,两边是小图。好了,直接贴代码了;

//轮播JS
  /*未元素的首尾添加补白*/
    var $panels				= $('#slider .scrollContainer > li');
    var $parent=$panels.parent();//或许当前li的最近一级的父元素
    var $length=$panels.length;//获取指定length值
    var $first=$panels.eq(0).clone().addClass("panel cloned").attr("id",'panel_'+($length+1));//获取第一个元素并复制
    var $last=$panels.eq($length-1).clone().addClass("cloned").attr("id",'panel_0');;//获取最后一个元素并复制
    $parent.append($first);//将li序列中的第一个添加到ul元素中的最后一个  $("#slide02").scrollLeft(0);
    $parent.prepend($last);//将li序列中的最后一个添加到ul元素中的第一个
    var totalPanels         = $(".scrollContainer").children().size();//所有子元素的数字,滚动元素的个数 7
    var regWidth            = $(".panel").css("width");//获取li元素的宽度
    var regImgWidth         = $(".panel img").css("width");//获取其中图片的宽度
    var movingDistance      = 195;//每次移动的距离
    var curWidth            = 384;//当前中间li的宽度为350px
    var curHeight         =753;//当前中间li的高度未312  
    var curImgWidth  =323;
    var curImgHeight  =574;
    var curBottom          =0;
    var othreMargin         =150;
    var othersW           =170;//其他li的宽度
    var othersH           =235;//高度
    /*var othersImgW           =100%;//其他li的宽度
    var othersImgH           =100%;//高度
*/  var $panels				= $('#slider .scrollContainer > li');//此处作用是将复制进来补白的元素重新赋值
    var $container			= $('#slider .scrollContainer');
    $(".addClass").css({'margin-top':150});
    $panels.css({'float' : 'left','position' : 'relative'});
    $("#slider").data("currentlyMoving", false);//是否正在运动中
    $container.css('width', (($panels[0].offsetWidth+26) * $panels.length) + 60 ).css('left','0');//计算容器的总的宽度 PS:25为margin值 offsetWidth
    var scroll = $('#slider .scroll').css('overflow', 'hidden');
    function returnToNormal(element) {//li元素返回到正常状态
        $(element).animate({ width: othersW,height: othersH,marginTop:othreMargin});
        $(element).find("div.contentMain").hide();

    };
    function growBigger(element) {//当前元素之间变大
        $(element).addClass("current").animate({ width: curWidth,height:curHeight,marginTop:curBottom}).siblings().removeClass("current")
        .end();
        $(element).find("div.contentMain").show();

    }
    //direction true = right, false = left
    function change(direction) {
        //if not at the first or last panel
        if((direction && !(curPanel < totalPanels-3)) || (!direction && (curPanel <= 1))) {
            return false;
        }   
        if (direction &&curPanel>0) {
            $("#slider .prev").show();
            $("#slider .prev").text(curPanel);
            $("#slider .next").text(curPanel+2);
            if(curPanel+2==9){
                $("#slider .next").hide();
            }
        } if (!direction) {
            if (curPanel>2) {
                $("#slider .next").show();
                $("#slider .prev").text(curPanel-2);
                $("#slider .next").text(curPanel);

            } else {

                $("#slider .prev").text("");
                $("#slider .prev").css("display","none");
                $("#slider .next").text(curPanel);
            }
        }
        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {
            $("#slider").data("currentlyMoving", true);
            var next         = direction ? curPanel + 1 : curPanel - 1;
            var leftValue    = $(".scrollContainer").css("left");
            var movement     = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
            $(".scrollContainer").stop().animate({"left": movement}, function() {
                $("#slider").data("currentlyMoving", false);
            });
            returnToNormal("#panel_"+curPanel);
            growBigger("#panel_"+next);
            curPanel = next;
            //remove all previous bound functions
            $("#panel_"+(curPanel+1)).unbind();    
            //go forward
            $("#panel_"+(curPanel+1)).click(function(){ change(true); });
            //remove all previous bound functions                                                           
            $("#panel_"+(curPanel-1)).unbind();
            //go back
            $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
            //remove all previous bound functions
            $("#panel_"+curPanel).unbind();
        }
    }
    // Set up "Current" panel and next and prev 设置当前元素和上下
    growBigger("#panel_1"); 
    var curPanel = 1;
    $("#panel_"+(curPanel+1)).click(function(){ change(true);return false;});
    $("#panel_"+(curPanel-1)).click(function(){ change(false);return false;});
    //when the prev/next arrows are clicked
    // $("#slider .next").click(function(){ change(true);});   
    // $("#slider .prev").click(function(){ change(false);});
    $(window).keydown(function(event){//键盘方向键控制
        switch (event.keyCode) {
            case 13: //enter
                $(".next").click();
            break;
            case 37: //prev arrow
                $(".prev").click();
            break;
            case 39: //next arrow
                $(".next").click();
            break;
        }
    }); 

  //轮播JS结束

html:

<!-- 轮播开始 -->
            <div class="btnMode" id="slider">    
                <a href="javascript:void(0);" class="prev btn"></a>
                    <div class="scroll">    
                        <ul class="scrollContainer">
                            <li class="panel addClass" id="panel_1">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b01.jpg" class="cur_img"/>
                                    <!-- <span>第一张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content1">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_2">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b02.jpg" class="cur_img "/>
                                    <!-- <span>第二张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content2">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_3">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b03.jpg" class="cur_img"/>
                                    <!-- <span>第三张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content3">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel current addClass" id="panel_4">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b04.jpg" class="cur_img"/>
                                    <!-- <span>第四张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content4">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_5">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b05.jpg" class="cur_img"/>
                                    <!-- <span>第五张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content5">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_6">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b06.jpg" class="cur_img"/>
                                    <!-- <span>第六张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content6">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_7">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b07.jpg" class="cur_img"/>
                                    <!-- <span>第七张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content7">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel  addClass" id="panel_8">
                                <a href="javascript:;" class="inside" >

                                    <img  alt="" src="b08.jpg" class="cur_img"/>
                                    <!-- <span>第八张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content8">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                             <li class="panel addClass" id="panel_9">
                                <a href="javascript:;" class="inside" >
                                    <img  src="z.jpg" class="cur_img"/>
                                    <!-- <span>第十张</span> -->
                                </a>
                                    <div class="contentMain">
                                <div class="content1">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>

                            </li>

                        </ul>
                    </div>
            <a href="javascript:void(0);" class="next btn">2</a>     
</div>
            <!-- 轮播结束 -->

本来为了说的明白做了个git效果图。但是太大了。上传失败。等下次做个小点的再穿上来吧。
另,有不明白的,可微博找我。
微博:璐飞童鞋。关注之后,私信我问题就可以。

发布了41 篇原创文章 · 获赞 24 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览