滑动轮播图实现最后一张图片无缝衔接第一张图片

Posted ZhangCui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滑动轮播图实现最后一张图片无缝衔接第一张图片相关的知识,希望对你有一定的参考价值。

原理:使用insertBefore和insertAfter方法调整图片顺序。

测试:firefox/chrome/IE11正常

已知不足:每次播放均使用了一次insertBefore和insertAfter,可考虑在最后一张图的时候将前几张图片整体后移。以后有空再优化。

1、html结构

alt的值将作为图片的描述信息出现在infobox里。

<div class="outerbox">
    <div>
        <a href="http://www.baidu.com"><img src="img/img1.jpg" alt="javascript高级程序设计"></a>
        <a href="http://www.w3school.com.cn/"><img src="img/img2.jpg" alt="油藏工程原理与方法"></a>
        <a href="http://www.cnblogs.com/zczhangcui/"><img src="img/img3.jpg" alt="高等数学第六版上册"></a>
        <a href="http://cn.bing.com/"><img src="img/img4.jpg" alt="银河帝国2:基地与帝国"></a>
        <a href="http://cn.bing.com/academic/?FORM=Z9LH2"><img src="img/img5.jpg" alt="三体"></a>
        <a href="http://cn.bing.com/dict/?FORM=HDRSC6"><img src="img/img6.jpg" alt="计算机科学导论"></a>
    </div>    
</div>

2、CSS

为方便轮播组件复用,大部分CSS样式包含在了jq组件中,所以在CSS中只需设置outerbox容器的高度和宽度。

.outerbox{
    height: 500px;
    width: 800px;
}

3、jquery轮播插件。

给每个图片设置了data-idx属性来标识它们,使infobox能够与每个图片对应。 

// 定义了DOM对象的slideShow()方法,
// 调用条件:外层容器内部嵌套一个容器,内层容器内放入a标签包裹的img元素,
// 调用方法:$("外层容器").slideShow(形参),可传入0~1个实参,
// 实参说明:一个设定颜色和轮播间隔的对象。形如{color:"#ff7",time:5000},对象可接受0~2个属性。
;(function($){
    $.fn.extend({
        "slideShow":function(args){
            //如果传入一个包含设置参数的对象,那么覆盖默认值
            var settings=jQuery.extend({
                color:"#317EF3",
                time:5000
            }, args);

            var i,
                $outerbox=$(this),
                $imgs=$outerbox.find(\'img\'),
                adTimer=null,
                $innerbox=$outerbox.children(\'div\'),
                imgnum=$imgs.length,
                imgwidth=$outerbox.width(),
                imgheight=$outerbox.height();

            //给每个图片设置data-idx属性标识它们,使其能够和infobox相对应
            for(i=0;i<imgnum;i++){
                $imgs.eq(i).attr(\'data-idx\', i);
            }

            //设置各个div的css样式
            $imgs.css({
                float: \'left\',
                border: \'none\'
            });
            $outerbox.css({
                overflow: \'hidden\',
                position: \'relative\'
            });
            $innerbox.css({
                width: imgwidth*imgnum+"px",
                position: \'absolute\',
                left:\'0\',
                top:\'0\'
            });

            //在outerbox下新增一个显示alt的div
            var infobox=$("<div class=\'infobox\'></div>");
            $outerbox.append(infobox);
            var $infobox=$outerbox.children(\'.infobox\');
            $infobox.css({
                position: \'absolute\',
                left: \'0\',
                bottom:\'0\',
                width:imgwidth+10+"px",
                height:\'13%\'
            });
            var liheight=$infobox.height();

            var lists="";
            for(i=0;i<imgnum;i++){
                lists+="<li><a href=\'\'><span></span></a></li>";
            }
            var ullists=$("<ul>"+lists+"</ul>");
            $infobox.append(ullists);
            $infobox.find(\'ul\').css({
                height: liheight+"px",
                paddingLeft:\'0\',
                marginTop:\'0\',
                marginBottom:\'0\'
            });
            $infobox.find(\'li\').css({
                display: \'inline-block\',
                float:\'left\',
                marginRight:\'3px\',
                background: "rgba(0,0,0,0.4)",
                height:liheight+"px",
                width:(imgwidth-(imgnum-1)*3)/imgnum+"px",
                lineHeight:liheight+\'px\',
                verticalAlign:\'middle\'
            });
            $infobox.find(\'a\').css({
                display: \'inline-block\',
                width:$infobox.find(\'li\').width()+"px",
                textAlign:\'center\'
            });
            $infobox.find(\'span\').css({
                display:\'inline-block\',
                lineHeight:\'1.1em\',
                paddingLeft:liheight*0.2+"px",
                paddingRight:liheight*0.2+"px",
                verticalAlign: \'middle\',
                color:\'#ddd\',
                fontSize:\'12px\',
                wordBreak:\'break-all\',
                height:\'2.2em\',
                overflow:\'hidden\'
            });

            //获得img上层a的href属性,赋给infobox里的a元素
            for(i=0;i<imgnum;i++){
                var link=$innerbox.children(\'a\').eq(i).attr("href");
                var info=$innerbox.find(\'img\').eq(i).attr("alt");
                $infobox.find(\'a\').eq(i).attr(\'href\', link);
                if(info){
                    $infobox.find(\'span\').eq(i).append(info);
                }else{
                    $infobox.find(\'span\').eq(i).append(i+1);
                }
            }

            //增加左右箭头
            var arrows=$(\'<div class="leftarrow arrow">&lt;</div><div class="rightarrow arrow">&gt;</div>\');
            $outerbox.append(arrows);
            var $arrows=$outerbox.children(\'.arrow\');
            $arrows.css({
                width:liheight*0.8+"px",
                height: liheight*1.5+"px",
                position:\'absolute\',
                top:(imgheight*0.5-liheight*0.75-10)+"px",
                background: "rgba(0,0,0,0.4)",
                textAlign:\'center\',
                lineHeight:liheight*1.45+\'px\',
                fontSize:\'1.5em\',
                color:\'#ddd\',
                cursor:\'pointer\'
            });
            $outerbox.children(\'.leftarrow\').css(\'left\', \'0\');
            $outerbox.children(\'.rightarrow\').css(\'right\', \'0\');

            //鼠标放在箭头上时,箭头变色
            $outerbox.children(\'.leftarrow\').hover(function() {
                $(this).css(\'background\', settings.color);
            }, function() {
                $(this).css(\'background\', \'rgba(0,0,0,0.4)\');
            });
            $outerbox.children(\'.rightarrow\').hover(function() {
                $(this).css(\'background\', settings.color);
            }, function() {
                $(this).css(\'background\', \'rgba(0,0,0,0.4)\');
            });

            //点击左右箭头
            var dataidx;
            $infobox.find(\'li\').eq(0).css(\'backgroundColor\', settings.color).siblings().css(\'background\', \'rgba(0,0,0,0.4)\');
            $outerbox.on(\'click\', \'.arrow\', function(event) {
                if ($(event.target).hasClass(\'rightarrow\')) {
                    if (!$innerbox.is(\':animated\')) {
                        dataidx=$innerbox.find(\'a:first\').next("a").find(\'img\').attr("data-idx");
                        $infobox.find(\'li\').eq(dataidx).css(\'backgroundColor\', settings.color).siblings().css(\'background\', \'rgba(0,0,0,0.4)\');
                        $innerbox.animate({left:-imgwidth}, "normal",function(){
                            $innerbox.find(\'a:first\').insertAfter($innerbox.find(\'a:last\'));
                            $innerbox.css(\'left\', \'0\');
                        });    
                    }
                }

                if ($(event.target).hasClass(\'leftarrow\')) {
                    if (!$innerbox.is(\':animated\')) {
                        $innerbox.find(\'a:last\').insertBefore($innerbox.find(\'a:first\'));
                        $innerbox.css(\'left\', -imgwidth);
                        $innerbox.animate({left:0}, "normal");
                        dataidx=$innerbox.find(\'a:first\').find(\'img\').attr("data-idx");
                        $infobox.find(\'li\').eq(dataidx).css(\'backgroundColor\', settings.color).siblings().css(\'background\', \'rgba(0,0,0,0.4)\');
                    }
                }
            });

            //自动轮播,鼠标放在div上时箭头出现,移走箭头消失
            $outerbox.hover(function() {
                $outerbox.find(\'.leftarrow\').stop().animate({left:"0"},300);
                $outerbox.find(\'.rightarrow\').stop().animate({right:"0"},300);
                $infobox.stop().animate({bottom:"0"}, 300);
                if (adTimer) {
                    clearInterval(adTimer);
                }
            }, function() {
                $outerbox.find(\'.leftarrow\').stop().animate({left:-liheight*0.8+"px"},300);
                $outerbox.find(\'.rightarrow\').stop().animate({right:-liheight*0.8+"px"},300);
                $infobox.stop().animate({bottom:-(liheight-7)+"px"}, 300);
                adTimer=setInterval(function () {
                    $outerbox.find(\'.rightarrow\').trigger(\'click\');
                },settings.time);
            }).trigger(\'mouseleave\');

            //鼠标放在下方的颜色块上时移动图片
            $infobox.find(\'li\').mouseover(function() {
                var index=$(this).index();
                var dataidx=$innerbox.find(\'a:first\').find(\'img\').attr("data-idx");
                $infobox.find(\'li\').eq(index).css(\'backgroundColor\', settings.color).siblings().css(\'background\', \'rgba(0,0,0,0.4)\');
                if(index-dataidx>0){
                    for(i=0;i<Math.abs(index-dataidx);i++){
                            $innerbox.find(\'a:first\').insertAfter($innerbox.find(\'a:last\'));
                    }
                }else if(index-dataidx<0){
                    for(i=0;i<Math.abs(index-dataidx);i++){
                            $innerbox.find(\'a:last\').insertBefore($innerbox.find(\'a:first\'));
                    }
                }
            });


            return this;
        }
    });
})(jQuery);

4、引入jq和该插件,并设置outerbox的宽度和高度,便可以实现滑动循环切换的轮播效果。

$(function(){
    $(".box").slideShow({color:\'red\'});
});

以上是关于滑动轮播图实现最后一张图片无缝衔接第一张图片的主要内容,如果未能解决你的问题,请参考以下文章

jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放

JS 轮播图(无缝连接的轮播图实现,含代码供参考)

js图片轮播点击

swiper插件怎么当图片只有一张时禁止自动轮播

逐帧轮播图效果实现

焦点轮播图效果实现