jQuery實(shí)現(xiàn)碎片輪播效果

更新時(shí)間：2022年05月06日 10:15:26 作者：南初?

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)碎片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)碎片輪播效果的具體代碼，供大家參考，具體內(nèi)容如下

一、效果圖

二、核心代碼

碎片輪播.html

<script src="js/suiBanner.js"></script>?
<script>
? ? //實(shí)例化整個(gè)對(duì)象
? ? 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
? ? ? ? }, //容器的大小 可選
? ? ? ? //行數(shù)與列數(shù) 可選
? ? ? ? grid: {
? ? ? ? ? ? line: 15,
? ? ? ? ? ? list: 18
? ? ? ? },
? ? ? ? index: 0, //圖片集合的索引位置 可選
? ? ? ? boxTime: 1500, //小方塊來(lái)回運(yùn)動(dòng)的時(shí)長(zhǎng) 可選
? ? ? ? fnTime: 1000 //banner切換的時(shí)長(zhǎng) 可選
? ? })?
</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;
? ? ? ? ? ? }
? ? ? ? }
? ? });
? ? //碎片輪播的類(lèi)
? ? function SuiBanner(){

? ? }
? ? //設(shè)置默認(rèn)配置
? ? SuiBanner.prototype={
? ? ? ? constructor:SuiBanner,
? ? ? ? option:{
? ? ? ? ? ? container:null,//默認(rèn)的容器
? ? ? ? ? ? imgs:[],//圖片集合必選
? ? ? ? ? ? size:{
? ? ? ? ? ? ? ? width:800,
? ? ? ? ? ? ? ? height:600
? ? ? ? ? ? },//容器的大小，可選
? ? ? ? ? ? grid:{
? ? ? ? ? ? ? ? line:8,
? ? ? ? ? ? ? ? list:12
? ? ? ? ? ? },
? ? ? ? ? ? index:0,//圖片集合的索引位置，可選
? ? ? ? ? ? boxTime:1000,//小方塊來(lái)回運(yùn)動(dòng)的時(shí)長(zhǎng)，可選
? ? ? ? ? ? fnTime:3000,//banner切換的時(shí)長(zhǎng)，可選
? ? ? ? ? ? sui:[],//碎片的集合
? ? ? ? ? ? suiPos:[],//存儲(chǔ)碎塊的最終位置
? ? ? ? ? ? timer:null,//接收計(jì)時(shí)器
? ? ? ? },
? ? ? ? _init:function(){
? ? ? ? ? ? var that=this,opt=this.option;
? ? ? ? ? ? //初始化方法
? ? ? ? ? ? //設(shè)置容器的樣式
? ? ? ? ? ? if(opt.container){
? ? ? ? ? ? ? ? opt.container.css({
? ? ? ? ? ? ? ? ? ? width:opt.size.width,
? ? ? ? ? ? ? ? ? ? height:opt.size.height
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? //創(chuàng)建dom
? ? ? ? ? ? that.createDom();
? ? ? ? ? ? //開(kāi)始動(dòng)畫(huà)
? ? ? ? ? ? that.start();

? ? ? ? },
? ? ? ? createDom:function(){
? ? ? ? ? ? var that=this,opt=this.option;
? ? ? ? ? ? //創(chuàng)建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);
? ? ? ? ? ? //創(chuàng)建一個(gè)碎片的容器
? ? ? ? ? ? opt.suiItem=$("<div class='suiItem'></div>");
? ? ? ? ? ? opt.container.append(opt.suiItem);
? ? ? ? ? ? //創(chuàng)建所有的碎片
? ? ? ? ? ? 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;
? ? ? ? ? ? //開(kāi)始加載動(dòng)畫(huà)
? ? ? ? ? ? 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;
? ? ? ? ? ? //設(shè)置小塊的隨機(jī)位置
? ? ? ? ? ? opt.suiItem.html(opt.sui[0]).children().each(function(index){
? ? ? ? ? ? ? ? //隨機(jī)自身的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;
? ? ? ? }
? ? }?
})();?

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: