文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jQuery实现碎片轮播效果

2024-04-02 19:55

关注

本文实例为大家分享了jQuery实现碎片轮播效果的具体代码,供大家参考,具体内容如下

一、效果图

二、核心代码

碎片轮播.html

<script src="js/suiBanner.js"></script> 
<script>
    //实例化整个对象
    var suiBanner=$('.box').initBanner({
        imgs: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg'], //图片集合 必选
        size: {
            width: 1000,
            height: 560
        }, //容器的大小 可选
        //行数与列数 可选
        grid: {
            line: 15,
            list: 18
        },
        index: 0, //图片集合的索引位置 可选
        boxTime: 1500, //小方块来回运动的时长 可选
        fnTime: 1000 //banner切换的时长 可选
    }) 
</script> 

suiBanner.js

function(){
    var instance;
    $.fn.extend({
        initBanner:function(setting){
            if(!instance){
                instance=new SuiBanner();
                instance.option.container=$(this);
                instance.option= $.extend({},instance.option,setting);
                instance._init();
                return instance;
            }
        }
    });
    //碎片轮播的类
    function SuiBanner(){

    }
    //设置默认配置
    SuiBanner.prototype={
        constructor:SuiBanner,
        option:{
            container:null,//默认的容器
            imgs:[],//图片集合必选
            size:{
                width:800,
                height:600
            },//容器的大小,可选
            grid:{
                line:8,
                list:12
            },
            index:0,//图片集合的索引位置,可选
            boxTime:1000,//小方块来回运动的时长,可选
            fnTime:3000,//banner切换的时长,可选
            sui:[],//碎片的集合
            suiPos:[],//存储碎块的最终位置
            timer:null,//接收计时器
        },
        _init:function(){
            var that=this,opt=this.option;
            //初始化方法
            //设置容器的样式
            if(opt.container){
                opt.container.css({
                    width:opt.size.width,
                    height:opt.size.height
                });
            }
            //创建dom
            that.createDom();
            //开始动画
            that.start();

        },
        createDom:function(){
            var that=this,opt=this.option;
            //创建dom元素
            opt.itemImage=$("<div class='itemImage'></div>");
            opt.imgs.forEach(function(img,index,arr){
                var img=$("<img src='"+img+"'/>");
                var aparent=$("<a href='#' style='z-index:"+(arr.length-index)+";'></a>");
                aparent.append(img);
                opt.itemImage.append(aparent);
            });
            opt.container.append(opt.itemImage);
            //创建一个碎片的容器
            opt.suiItem=$("<div class='suiItem'></div>");
            opt.container.append(opt.suiItem);
            //创建所有的碎片
            var html="";
            for(var i=0;i<opt.grid.line;i++){
                for(var k=0;k<opt.grid.list;k++){
                    opt.suiPos.push([opt.size.width/opt.grid.list*k,opt.size.height/opt.grid.line*i]);
                    html+="<div style='background-size: "+opt.size.width+"px
"+opt.size.height+"px;width:"+opt.size.width/opt.grid.list+"px;height:"+opt.size.height/opt.grid.line+"px;'></div>";
                }
            }
            opt.sui[0]=html;
        },
        start:function(){
            var that=this,opt=this.option;
            //开始加载动画
            opt.suiItem.html("");
            opt.itemImage.children().eq(opt.index).show().siblings().hide();
            opt.timer=setTimeout(function(){
                opt.index++;
                if(opt.index>=opt.imgs.length-1){
                    opt.index=0;
                }
                that.animation();
            },opt.fnTime);
        },
        animation:function(){
            var that=this,opt=this.option;
            //设置小块的随机位置
            opt.suiItem.html(opt.sui[0]).children().each(function(index){
                //随机自身的left、top
                var left=that.random(opt.size.width*2,opt.size.width/2);
                var top=that.random(opt.size.height*2,opt.size.height/2);
                $(this).css({
                    left:left,
                    top:top,
                    backgroundImage:'url('+opt.imgs[opt.index]+')',
                    backgroundPosition:-opt.suiPos[index][0]+'px '+(-opt.suiPos[index][1])+'px'
                }).animate({
                    left:opt.suiPos[index][0],
                    top:opt.suiPos[index][1]
                },opt.boxTime);
            }).last().queue(function(){
                that.start();
                $(this).dequeue();
            });
        },
        random:function(s,e){
            return Math.random()*s-e;
        }
    } 
})(); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯