本發(fā)明涉及網(wǎng)頁制作領(lǐng)域，特別涉及一種輪播圖設(shè)置方法及系統(tǒng)。

背景技術(shù)：

作為一個企業(yè)的互聯(lián)網(wǎng)支撐服務(wù)平臺，跟大部分的官方網(wǎng)站一樣，輪播圖是必不可少的元素。官網(wǎng)中的輪播圖占據(jù)了網(wǎng)頁的一大部分位置，用于實時顯示最新的動態(tài)與活動。輪播圖的切換，通常是通過左右滑動來達到顯示下一張圖片的效果。其切換的左右滑動的動畫是通過css3(CSS，Cascading StyleSheet，層疊樣式表)動畫實現(xiàn)，即為輪播圖的附標(biāo)簽添加了一個過渡的動畫屬性，在即將切換的時候設(shè)置其css中的left屬性，則該附標(biāo)簽就會按照一定屬性描畫出軌跡進行運動，從而形成了切換動畫。

現(xiàn)有技術(shù)中，輪播的圖片都是一次性全部加載，從而可能導(dǎo)致想顯示出來的圖片未下載完成，暫時不需要顯示的圖片卻已下載，且官網(wǎng)上的輪播圖的切換動畫是固定了的左右滑動的切換方式，這種動畫比較普通，用戶接觸久了會有一種疲勞感，尤其是控制臺的內(nèi)容管理，只能單純地上傳一張張的圖片和修改圖片的順序，因此為了達到修改輪播圖效果，需要web前端開發(fā)工程師上線手動修改代碼。

技術(shù)實現(xiàn)要素：

有鑒于此，本發(fā)明的目的在于提供一種輪播圖設(shè)置方法，使終端能夠接收通過控制臺修改輪播圖效果，不再需要web前端開發(fā)工程師手動修改代碼。其具體方案如下：

一種輪播圖設(shè)置方法，包括：

接收控制臺發(fā)送的輪播圖，其中，所述輪播圖中包括圖片集；

按照所述控制臺設(shè)定的背景圖片加載順序，加載所述圖片集中的背景圖片；

加載所述控制臺添加到所述圖片集中的可添加元素集。

優(yōu)選的，所述加載所述控制臺添加到所述圖片集中的可添加元素集，包括：

加載所述圖片集中與每一背景圖片一一對應(yīng)的所述可添加元素集中的一組可添加元素。

優(yōu)選的，所述加載所述控制臺添加到所述圖片集中的可添加元素集，包括：

加載所述圖片集中與任意背景圖片對應(yīng)的所述可添加元素集中的可添加元素。

優(yōu)選的，所述可添加元素包括：小圖片和/或所述小圖片的動畫。

優(yōu)選的，所述加載所述控制臺添加到所述圖片集中的可添加元素集，包括：

獲取對所述可添加元素的排序方式，利用所述可添加元素的排序方式，依序加載所述可添加元素。

優(yōu)選的，所述加載所述控制臺添加到所述圖片集中的可添加元素集，包括：

獲取所述可添加元素的權(quán)重，利用所述可添加元素的權(quán)重，依序加載所述可添加元素。

優(yōu)選的，所述加載所述控制臺添加到所述圖片集中的可添加元素集，包括：

獲取所述可添加元素的文件大小，利用所述可添加元素的文件大小，按照所述文件大小從小到大的順序，依序加載所述可添加元素。

本發(fā)明還公開了一種輪播圖設(shè)置系統(tǒng)，包括：

輪播圖接收模塊，用于接收控制臺發(fā)送的輪播圖，其中，所述輪播圖中包括圖片集；

圖片加載模塊，用于按照所述控制臺設(shè)定的背景圖片加載順序，加載所述圖片集中的背景圖片；

元素加載模塊，用于加載所述控制臺添加到所述圖片集中的可添加元素集。

優(yōu)選的，所述元素加載模塊，具體用于加載所述控制臺添加到所述圖片集中與每一背景圖片一一對應(yīng)的所述可添加元素集中的一組可添加元素。

優(yōu)選的，所述元素加載模塊，具體用于加載所述圖片集中與任意背景圖片對應(yīng)的所述可添加元素集中的可添加元素。

本發(fā)明中，輪播圖設(shè)置方法，包括：接收控制臺發(fā)送的輪播圖，其中，輪播圖中包括圖片集；按照控制臺設(shè)定的背景圖片加載順序，加載圖片集中的背景圖片；加載控制臺添加到圖片集中的可添加元素集。可見，本發(fā)明用戶終端通過接收控制臺發(fā)送的輪播圖，能夠顯示出經(jīng)過控制臺自定義過的輪播圖，不再需要web前端開發(fā)工程師手動修改代碼，直接通過控制臺便可修改輪播圖中的背景圖片和動畫效果等，使用戶終端能夠加載出自定義輪播圖中的各種動畫，且利用預(yù)先設(shè)定的加載順序，使得用戶終端不用一次性下載全部圖片，可以提前預(yù)覽輪播圖的部分圖片，達到了快速展示的效果。

附圖說明

為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的實施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。

圖1為本發(fā)明實施例提供的一種輪播圖設(shè)置方法流程示意圖；

圖2為本發(fā)明實施例提供的另一種輪播圖設(shè)置方法流程示意圖；

圖3為本發(fā)明實施例提供的另一種輪播圖設(shè)置方法流程示意圖；

圖4為本發(fā)明實施例提供的另一種輪播圖設(shè)置方法流程示意圖；

圖5為本發(fā)明實施例提供的一種輪播圖設(shè)置系統(tǒng)結(jié)構(gòu)示意圖。

具體實施方式

下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

本發(fā)明實施例公開了一種輪播圖設(shè)置方法，參見圖1所示，該方法包括：

步驟S11：接收控制臺發(fā)送的輪播圖，其中，輪播圖中包括圖片集。

具體的，用戶終端接收由控制臺發(fā)送的輪播圖，其中，輪播圖為管理員經(jīng)過控制臺制作而成的。

步驟S12：按照控制臺設(shè)定的背景圖片加載順序，加載圖片集中的背景圖片。

具體的，管理員上傳圖片集到控制臺中，圖片集中包含至少一個背景圖片，控制臺創(chuàng)建圖層，按照管理員輸入的背景圖片順序，將圖片集中的背景圖片依序放入圖層中，使得用戶終端能夠依據(jù)背景圖片加載順序，依序加載圖片集中的背景圖片。

可以理解的是，管理員不僅可以通過控制臺創(chuàng)建新的圖層，來添加背景圖片，也可以修改已經(jīng)存在的圖層，可以調(diào)整已保存的圖層中的背景圖片顯示順序和切換動畫的順序。

需要說明的是，由于添加了背景圖片的加載順序，使得用戶終端接收圖片時，不再需要一次性下載完整張輪播圖，而是依序的一張一張的下載，使得用戶能夠提前瀏覽到輪播圖的部分圖片，達到了快速展示的效果，提升了用戶體驗。

步驟S13：加載控制臺添加到圖片集中的可添加元素集。

具體的，用戶終端加載控制臺添加到圖片集中的可添加元素集，可添加元素集是管理員在控制臺添加或修改完背景圖片后添加的，可添加元素是可以根據(jù)實際應(yīng)用需求進行添加的，如果沒有可添加元素，當(dāng)然也可以不進行添加，直接使用背景圖片生成輪播圖；如果有，則可以在背景圖片上添加可添加元素。

例如，選擇一張背景圖片，并在該背景圖片上添加可添加元素，可添加元素可以包括小圖片和/或小圖片的動畫等元素，在背景圖片上為小圖片選擇添加位置，并進行添加，判斷是否有必要繼續(xù)為小圖片添加小圖片的動畫路徑，如果不進行添加，則將使用默認(rèn)動畫路徑進行設(shè)置，如果進行添加，則選中需要添加的小圖片，對該小圖片的動畫路徑進行設(shè)置，如該圖片切換方式為水平方向滑出界面。

可以理解的是，可以在一張背景圖片上添加多種可添加元素，已達到豐富頁面內(nèi)容的效果，同時可以在輪播圖中的多張背景圖片中添加可添加元素，而不只局限于一張。

可見，本發(fā)明實施例用戶終端通過接收控制臺發(fā)送的輪播圖，能夠顯示出經(jīng)過控制臺自定義過的輪播圖，不再需要web前端開發(fā)工程師手動修改代碼，直接通過控制臺便可修改輪播圖中的背景圖片和動畫效果等，使用戶終端能夠加載出自定義輪播圖中的各種動畫，且利用預(yù)先設(shè)定的加載順序，使得用戶終端不用一次性下載全部圖片，可以提前預(yù)覽輪播圖的部分圖片，達到了快速展示的效果。

本發(fā)明實施例公開了一種具體的輪播圖設(shè)置方法，相對于上一實施例，本實施例對技術(shù)方案作了進一步的說明和優(yōu)化。參見圖2所示，具體的：

步驟S21：接收控制臺發(fā)送的輪播圖，其中，輪播圖中包括圖片集。

步驟S22：按照控制臺設(shè)定的背景圖片加載順序，加載圖片集中的背景圖片。

步驟S23：加載圖片集中與每一背景圖片一一對應(yīng)的可添加元素集中的一組可添加元素。

具體的，用戶終端加載圖片集中與每一背景圖片一一對應(yīng)的可添加元素集中的一組可添加元素，控制臺從可添加元素集中，挑選出數(shù)組可添加元素，每組可添加元素包含至少一個可添加元素，例如，小圖片、動畫效果和音頻等，每組可添加元素對應(yīng)圖片集中的一張背景圖片，當(dāng)用戶終端按照背景圖片加載順序加載背景圖片后，也相應(yīng)的加載背景圖片上的可添加元素。

例如，輪播圖中一共有五張背景圖片，五張背景圖片中都相應(yīng)的添加了一組可添加元素，即共有5組可添加元素分別一一對應(yīng)每張背景圖片，當(dāng)控制臺將輪播圖發(fā)送到用戶終端時，用戶終端先按照圖片加載順序加載第一背景圖片，加載完第一背景圖片后，加載第一背景圖片上對應(yīng)的第一可添加元素，加載完畢后，第一背景圖片的動畫效果將完全展示在用戶終端上，當(dāng)用戶選擇瀏覽下一張圖片時，加載第二背景圖片，加載完畢后，加載第二背景圖片上的第二可添加元素，以此類推，直到加載出第五背景圖片及其可添加元素，即輪播圖加載完畢。

另外，本發(fā)明實施例還公開了一種具體的輪播圖設(shè)置方法，參見圖3所示，具體的：

步驟S31：接收控制臺發(fā)送的輪播圖，其中，輪播圖中包括圖片集。

步驟S32：按照控制臺設(shè)定的背景圖片加載順序，加載圖片集中的背景圖片。

步驟S33：加載圖片集中與任意背景圖片對應(yīng)的可添加元素集中的可添加元素。

具體的，相較于上一實施例，本發(fā)明實施例中可添加元素不僅可以與背景圖片一一對應(yīng)，也可以一對多，控制臺從可添加元素集中挑選出可添加元素，將可添加元素分配到圖片集中的背景圖片中，此時挑選出的可添加元素數(shù)量可能少于背景圖片數(shù)量，因此一個可添加元素可以對應(yīng)多個背景圖片，同時，一個背景圖片上可能再次出現(xiàn)其他背景圖片上的可添加元素。

例如，輪播圖中一共有10張背景圖片，控制臺從可添加元素集中挑選出5個可添加元素，第一背景圖片至第四背景圖片對應(yīng)第一可添加元素，第五背景圖片對應(yīng)第一可添加元素和第二可添加元素，第六背景圖片和第七背景圖片對應(yīng)第三可添加元素和第四可添加元素，第八背景圖片至第十背景圖片對應(yīng)第三可添加元素至第五可添加元素，當(dāng)用戶終端加載時，先加載第一背景圖片，當(dāng)加載完第一背景圖片后，加載第一可添加元素，當(dāng)用戶在第一背景圖片至第四背景圖片之間切換時，只需加載未加載的背景圖片，而不用再加載第一可添加元素，且第一背景圖片至第四背景圖片上均顯示第一可添加元素，當(dāng)加載第五背景圖片后，加載第二可添加元素，第五背景圖片上將顯示第一可添加元素和第二可添加元素，加載第六背景圖片和第七背景圖片后，相應(yīng)的加載第三可添加元素和第四可添加元素，第八背景圖片至第十背景圖片后，加載第三可添加元素至第五可添加元素。

此外，本發(fā)明實施例還公開了另一種具體的輪播圖設(shè)置方法，參見圖4所示，具體的：

步驟S41：接收控制臺發(fā)送的輪播圖，其中，輪播圖中包括圖片集。

步驟S42：按照控制臺設(shè)定的背景圖片加載順序，加載圖片集中的背景圖片。

步驟S43：獲取對可添加元素的排序方式，利用可添加元素的排序方式，依序加載可添加元素。

具體的，用戶終端加載可添加元素前，先從控制臺發(fā)送的輪播圖中，獲取需要顯示的全部可添加元素數(shù)據(jù)傳入前端轉(zhuǎn)換裝置中，包括元素的圖片路徑、圖片大小、位置、動畫路徑、權(quán)重和輪播順序等數(shù)據(jù)；優(yōu)先通過可添加元素對應(yīng)的背景圖片的輪播順序?qū)⒖商砑釉胤纸M，一組可添加元素內(nèi)包括這一張背景大圖和各種可添加元素，將背景大圖設(shè)置為該分組內(nèi)最優(yōu)先級別；小組內(nèi)其它的可添加元素優(yōu)先根據(jù)管理員在控制臺設(shè)置的權(quán)重進行排序，若管理員未設(shè)置權(quán)重，則利用可添加元素的文件大小進行排序，按照可添加元素的文件大小，從小到大順序排在背景大圖后面；最后排序完畢的元素組，添入一個隊列中；從該隊列中依次拿出最前面的元素進行加載，并將該元素從隊列中刪除。監(jiān)聽該元素中圖片的加載，一旦圖片加載完成，則繼續(xù)從隊列中拿出元素進行加載；直到隊列元素為空，所有元素加載完畢，輪播圖加載完成。

本發(fā)明實施例還公開了一種輪播圖設(shè)置系統(tǒng)，參見圖5所示，該系統(tǒng)包括：

輪播圖接收模塊11，用于接收控制臺發(fā)送的輪播圖，其中，輪播圖中包括圖片集；

圖片加載模塊12，用于按照控制臺設(shè)定的背景圖片加載順序，加載圖片集中的背景圖片；

元素加載模塊13，用于加載控制臺添加到圖片集中的可添加元素集。

其中，可添加元素可以包括小圖片和/或小圖片的動畫等。

本發(fā)明實施例中的元素加載模塊13，可以具體用于加載控制臺添加到圖片集中與每一背景圖片一一對應(yīng)的可添加元素集中的一組可添加元素。

進一步，上述元素加載模塊13，可以具體用于加載圖片集中與任意背景圖片對應(yīng)的可添加元素集中的可添加元素。

上述元素加載模塊13，可以具體用于獲取對可添加元素的排序方式，利用可添加元素的排序方式，依序加載可添加元素。

具體的，可以獲取可添加元素的權(quán)重，利用可添加元素的權(quán)重，依序加載可添加元素；

或，獲取可添加元素的文件大小，利用可添加元素的文件大小，按照文件大小從小到大的順序，依序加載可添加元素。

可見，本發(fā)明實施例用戶終端通過接收控制臺發(fā)送的輪播圖，能夠顯示出經(jīng)過控制臺自定義過的輪播圖，不再需要web前端開發(fā)工程師手動修改代碼，直接通過控制臺便可修改輪播圖中的背景圖片和動畫效果等，使用戶終端能夠加載出自定義輪播圖中的各種動畫，且利用預(yù)先設(shè)定的加載順序，使得用戶終端不用一次性下載全部圖片，可以提前預(yù)覽輪播圖的部分圖片，達到了快速展示的效果。

最后，還需要說明的是，在本文中，諸如第一和第二等之類的關(guān)系術(shù)語僅僅用來將一個實體或者操作與另一個實體或操作區(qū)分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關(guān)系或者順序。而且，術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設(shè)備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設(shè)備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括所述要素的過程、方法、物品或者設(shè)備中還存在另外的相同要素。

以上對本發(fā)明所提供的一種輪播圖設(shè)置方法及系統(tǒng)進行了詳細(xì)介紹，本文中應(yīng)用了具體個例對本發(fā)明的原理及實施方式進行了闡述，以上實施例的說明只是用于幫助理解本發(fā)明的方法及其核心思想；同時，對于本領(lǐng)域的一般技術(shù)人員，依據(jù)本發(fā)明的思想，在具體實施方式及應(yīng)用范圍上均會有改變之處，綜上所述，本說明書內(nèi)容不應(yīng)理解為對本發(fā)明的限制。