兼容IE8图片轮播

最新推荐文章于 2021-06-16 05:07:15 发布
最新推荐文章于 2021-06-16 05:07:15 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： web前端 文章标签： ie 8 轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglufei_1992/article/details/53739317
版权

最近在做一个活动，其中产品给的需求是：一共是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效果图。但是太大了。上传失败。等下次做个小点的再穿上来吧。
另，有不明白的，可微博找我。
微博：璐飞童鞋。关注之后，私信我问题就可以。

麦兜麦兜麦兜兜
关注
专栏目录
兼容IE8的带左右箭头的轮播图
lyl520_zyg1314的博客
07-12 1587
轮播图是我们网页上最常见到的效果，尤其要兼容IE8,这时就的考虑兼容了，下面就是我们PC端项目上用到的一个demo,整理了一下，以便择日使用，话不多说，直接上代码。html&lt;&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&quo
自制轮播图（兼容IE8）
weixin_41905935的博客
07-30 1427
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
兼容IE8的高级jQuery轮播图插件
04-17
在网上搜集到的兼容IE8的jQuery轮播图插件代码，里面有五种样式选择非常实用。
兼容ie8的轮播图
qq_41893686的博客
05-12 387
JS插件：http://www.superslide2.com/param.html 效果图： 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e.
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
weixin_33168819的博客
06-16 554
jSlider是一款兼容IE8的高级jQuery轮播图插件。jSlider轮播图插件的特点是轻量级，使用简单，跨平台。通过jSlider你可以非常容易的而在网页中实现任何轮播图效果。它的特点还有：速度快，使用简单。轻量级，压缩后的版本仅3.6KB。支持IE8+, Chrome, FireFox, Safari, Opera, Edge浏览器。支持iOS 和 Android等移动设备。支持5种动画效...
兼容IE8的jQuery轮播图插件
06-24
兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码。
jq 兼容ie7 8的图片轮播
01-03
这个“jq 兼容ie7 8的图片轮播”示例提供了一个基础的实现方案，但实际项目中可能需要根据具体需求进行定制，比如添加指示点、动态加载图片、自适应布局等。通过不断学习和实践，你可以创建出更加复杂和功能丰富的...
JS编写兼容IE6,7,8浏览器无缝自动轮播
12-02
项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！ 但是很多都是不兼容IE6,7,8这些低级...
兼容IE8的jQuery宽屏幻灯片轮播插件特效代码
03-20
在“兼容IE8的jQuery宽屏幻灯片轮播插件特效代码”中，我们关注的重点在于其对Internet Explorer 8（简称IE8）的良好支持，这是一个在早期广泛使用的浏览器，虽然现在已经逐渐被淘汰，但在某些场合仍需考虑其兼容性...
html轮播图兼容ie8,多功能响应式兼容IE8图片轮播
weixin_39634898的博客
06-16 377
2016-09-27 10:02:56前段时间在写一个官网，官网中很多地方都用到了图片轮播，但是需求中要求网站适配到IE8同时具有自适应的特点，适配各种尺寸的浏览器和移动端浏览器。于是我尝试了在网上查找相关的代码，但遗憾的是很多插件要么兼容IE8，但是不支持响应式，要么支持响应式不支持IE8，万恶的IE8很是让人头疼。于是，自己就写了一个响应式的轮播插件，并兼容IE8浏览器。先来看一下程序的htm...
兼容IE8的jQuery图片宽屏幻灯片轮播插件
08-24
兼容IE8的jQuery宽屏幻灯片轮播插件
兼容ie8的响应式jquery轮播图插件.zip
07-04
这是一款兼容ie8的响应式jquery轮播图插件。该jquery轮播图插件使用简单，浏览器兼容性良好。
精美html+css上下滚动,轮播(兼容ie8)
01-06
jquery实现图图片或者文本轮播，上下或者左右可配置，文件中为图片上传循环轮播，拿来即可使用，主要可以兼容ie7及以上版本，可以使用，亲测
兼容ie8的响应式jquery轮播图插件
12-11
这是一款兼容ie8的响应式jquery轮播图插件。该jquery轮播图插件使用简单，浏览器兼容性良好。
jquery图片轮播兼容IE
01-20
jquery实现的三种图片轮播，兼容IE浏览器
swiper轮播图--兼容IE8
weixin_30701521的博客
08-08 452
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, pagination: '.pagination', autoplay: 2000, autoplayDisableOnInt...
轮播实现
weshouldhelp的博客
09-11 334
jquery-3.1.1.min.js版本，图片大小为1080px*432px &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;jQuery焦点图蓝色箭头按钮切换代码 - 站长素材&lt;/title&gt;     
九宫图-图片轮播-兼容IE8和Chrome浏览器
zyytaiyame的博客
12-23 466
在线测试打包下载九宫图-图片轮播 兼容IE8和Chrome浏览器
兼容IE8的轮播图插件
叶才鑫
07-20 1584
兼容IE8的轮播图插件 下载
jquery兼容ie8的轮播图
最新发布
05-24
以下是一个简单的 jQuery 轮播图插件，并且兼容 IE8： HTML 代码： ``` <li><img src="slide1.jpg"> <li><img src="slide2.jpg"> <li><img src="slide3.jpg"> ``` CSS 代码： ``` .slider { position:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值