CN110399504A - A kind of picture carousel method, device, equipment and computer readable storage medium - Google Patents
A kind of picture carousel method, device, equipment and computer readable storage medium Download PDFInfo
- Publication number
- CN110399504A CN110399504A CN201910657510.9A CN201910657510A CN110399504A CN 110399504 A CN110399504 A CN 110399504A CN 201910657510 A CN201910657510 A CN 201910657510A CN 110399504 A CN110399504 A CN 110399504A
- Authority
- CN
- China
- Prior art keywords
- picture
- placeholder
- carousel
- src
- adjacent
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000012546 transfer Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 11
- 230000009286 beneficial effect Effects 0.000 abstract description 4
- 230000008569 process Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 4
- 238000009877 rendering Methods 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000001902 propagating effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
- G06F16/43—Querying
- G06F16/438—Presentation of query results
- G06F16/4387—Presentation of query results by the use of playlists
- G06F16/4393—Multimedia presentations, e.g. slide shows, multimedia albums
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
This application discloses a kind of picture carousel methods, including when receiving the instruction of picture carousel, are instructed according to picture carousel and determine carousel direction；When carousel direction is carousel backward, the picture src in the adjacent placeholder of rear side of current placeholder is obtained, and the picture src in the adjacent placeholder of rear side is transferred in current placeholder；When carousel direction is carousel forward, the picture src in the adjacent placeholder in front side of current placeholder is obtained, and the picture src in the adjacent placeholder in front side is transferred in current placeholder；The corresponding image information of picture src in current placeholder is shown using front-end interface, completes picture carousel；The picture carousel method is it is possible to prevente effectively from carousel figure ensure that user experience in the Caton situation of front-end interface.Disclosed herein as well is a kind of picture wheel broadcasting device, equipment and computer readable storage mediums, all have above-mentioned beneficial effect.
Description
Technical field
This application involves multimedia technology field, in particular to a kind of picture carousel method further relates to a kind of picture carousel
Device, equipment and computer readable storage medium.
Background technique
Carousel diagram technology is the plurality of pictures that will carry presupposed information, in a kind of skill that display interface is presented in turn
Art is chiefly used in product promotion, information propagating, class so that viewer can be convenient the information for quickly recognizing that it wants to convey
It is similar to PPT projection, is a kind of information propagation pattern for being commonly used in and showing important content.
It is usually disposable in advance to complete page rendering during existing picture carousel, then execute picture carousel behaviour
Make, still, in the case where facing super large data volume carousel figure, if still using this kind of carousel figure implementation method, is carrying out greatly
In the render process of the data volume page, it is easy to occur since page committed memory is excessive, DOM node excessively causes greatly in the page
Spirogram piece is stuck the front-end interface the problem of, and then causes the picture load time too long, has not only been unfavorable for performance of front end optimization, but also drop
Low user experience.
Therefore, how effectively to avoid carousel figure in the Caton situation of front-end interface, guarantee that user experience is art technology
Personnel's urgent problem to be solved.
Summary of the invention
The purpose of the application is to provide a kind of picture carousel method, and the picture carousel method is it is possible to prevente effectively from carousel figure exists
The Caton situation of front-end interface, ensure that user experience；The another object of the application is to provide a kind of picture wheel broadcasting device, equipment
And computer readable storage medium, it may have above-mentioned beneficial effect.
In order to solve the above technical problems, this application provides a kind of picture carousel method, the picture carousel method includes:
When receiving the instruction of picture carousel, is instructed according to the picture carousel and determine carousel direction；
When the carousel direction is carousel backward, the picture src in the adjacent placeholder of rear side of current placeholder is obtained,
And the picture src in the adjacent placeholder of the rear side is transferred in the current placeholder；
When the carousel direction is carousel forward, the picture src in the adjacent placeholder in front side of current placeholder is obtained,
And the picture src in the adjacent placeholder in the front side is transferred in the current placeholder；
The corresponding image information of picture src in the current placeholder is shown using front-end interface, completes figure
Piece carousel.
Preferably, it is described when receive picture carousel instruction when, according to the picture carousel instruct determine carousel direction it
Before, further includes:
Preset quantity placeholder is constructed in the front-end interface according to the picture load instruction received；Wherein, described
The value of preset quantity is not less than 3；
Instruction is loaded according to the picture and carries out picture load, obtains the preset quantity picture src, and will be each described
Picture src correspondence is inserted into each placeholder；
Any placeholder for being not at marginal position is chosen in each placeholder as the current placeholder；
The corresponding image information of current image src in the current placeholder is shown using the front-end interface
Show.
Preferably, before the picture src by the adjacent placeholder of the rear side is transferred in the current placeholder,
Further include:
Current image src in the current placeholder is transferred in the adjacent placeholder in the front side；
Picture src in the adjacent placeholder in the front side is transferred in default picture src queue.
Preferably, after the picture src by the adjacent placeholder of the rear side is transferred in the current placeholder,
Further include:
New picture src is obtained from the default picture src queue to be transferred in the adjacent placeholder of the rear side.
Preferably, the picture carousel method further include:
When the picture src is not present in the adjacent placeholder in the front side and the adjacent placeholder of the rear side, figure is generated
Piece carousel terminates to prompt.
Preferably, the picture carousel method further include:
In the front-end interface, by CSS technology to the adjacent placeholder in the front side and the adjacent placeholder of the rear side
In the corresponding image information of picture src be hidden, and to the corresponding image information of picture src in the current placeholder
It is shown.
Preferably, transfer of the picture src in each placeholder is realized using js.
In order to solve the above technical problems, present invention also provides a kind of picture wheel broadcasting device, the picture wheel broadcasting device packet
It includes:
Carousel direction determining mould, for being instructed and being determined according to the picture carousel when receiving the instruction of picture carousel
Carousel direction；
To carousel modules after picture, for obtaining the rear side of current placeholder when the carousel direction is carousel backward
Picture src in adjacent placeholder, and the picture src in the adjacent placeholder of the rear side is transferred to the current placeholder
In；
To carousel modules before picture, for obtaining the front side of current placeholder when the carousel direction is carousel forward
Picture src in adjacent placeholder, and the picture src in the adjacent placeholder in the front side is transferred to the current placeholder
In；
Picture display module, for being believed using front-end interface the corresponding image of picture src in the current placeholder
Breath is shown, picture carousel is completed.
In order to solve the above technical problems, present invention also provides a kind of picture carousel equipment, the picture carousel equipment packet
It includes:
Memory, for storing computer program；
Processor realizes the step of any one of the above picture carousel enabled method when for executing the computer program
Suddenly.
In order to solve the above technical problems, the computer can present invention also provides a kind of computer readable storage medium
It reads to be stored with computer program on storage medium, the computer program realizes any one of the above picture when being executed by processor
The step of carousel method.
A kind of picture carousel method provided herein, including when receiving the instruction of picture carousel, according to the figure
Piece carousel, which instructs, determines carousel direction；When the carousel direction is carousel backward, the rear side for obtaining current placeholder adjacent is accounted for
Picture src in the symbol of position, and the picture src in the adjacent placeholder of the rear side is transferred in the current placeholder；Work as institute
State carousel direction be forward carousel when, obtain the picture src in the adjacent placeholder in front side of current placeholder, and by the front side
Picture src in adjacent placeholder is transferred in the current placeholder；Using front-end interface in the current placeholder
The corresponding image information of picture src is shown, picture carousel is completed.
As it can be seen that picture carousel method provided herein, creates multiple placeholders in front-end interface in advance, and each
A picture src (source file) is prestored in placeholder, and then corresponding to the picture src in specified placeholder by front-end interface
Image information is shown, as a result, when carrying out picture carousel, it is only necessary to which the storage location of picture src is transferred to specified account for
In the symbol of position, compared to the prior art, no matter the quantity of carousel picture, this kind of implementation be not necessarily to carry out the page
Disposable Rendering operations, in carousel operating process, it is only necessary to guarantee there is figure in two adjacent placeholders of specified placeholder
Piece src can realize quick picture carousel by transfer picture src storage location, greatly reduce the picture load time, have
Effect avoids carousel picture in the prior art and is easy to the problem of Caton occur in front-end interface, ensure that front end page operation stream
Freely, the user experience is improved, and optimizes performance of front end.
A kind of picture wheel broadcasting device, equipment and computer readable storage medium provided herein, all has above-mentioned
Beneficial effect, details are not described herein.
Detailed description of the invention
In order to illustrate the technical solutions in the embodiments of the present application or in the prior art more clearly, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
The embodiment of application for those of ordinary skill in the art without creative efforts, can also basis
The attached drawing of offer obtains other attached drawings.
Fig. 1 is a kind of flow diagram of picture carousel method provided herein；
Fig. 2 is the flow diagram of another picture carousel method provided herein；
Fig. 3 is a kind of structural schematic diagram of picture wheel broadcasting device provided herein；
Fig. 4 is a kind of structural schematic diagram of picture carousel equipment provided herein.
Specific embodiment
The core of the application is to provide a kind of picture carousel method, and the picture carousel method is it is possible to prevente effectively from carousel figure exists
The Caton situation of front-end interface, ensure that user experience；Another core of the application is to provide a kind of picture wheel broadcasting device, equipment
And computer readable storage medium, it may have above-mentioned beneficial effect.
To keep the purposes, technical schemes and advantages of the embodiment of the present application clearer, below in conjunction with the embodiment of the present application
In attached drawing, the technical scheme in the embodiment of the application is clearly and completely described, it is clear that described embodiment is
Some embodiments of the present application, instead of all the embodiments.Based on the embodiment in the application, those of ordinary skill in the art
All other embodiment obtained without making creative work, shall fall in the protection scope of this application.
Referring to FIG. 1, Fig. 1 is a kind of flow diagram of picture carousel method provided herein, the picture carousel
Method may include:
S101: it when receiving the instruction of picture carousel, is instructed according to picture carousel and determines carousel direction；
This step aims at the determination in picture carousel direction, i.e., is instructed according to the picture carousel received and determine picture
Carousel direction, such as forward direction carousel or backward carousel.Wherein, picture carousel instruction can be based on according to actual needs by picture browsing person
Front-end interface is initiated, if desired browsing pictures backward, then to carousel direction after can specify, if desired browsing forward picture, then
It can specify preceding to carousel direction.
It is understood that the carousel direction of above-mentioned forward direction carousel and backward carousel is a kind of relative direction, do not refer to
Fixed unique direction, for example, user is more likely to the picture realization picture wheel that horizontally slips for the display interface of computer
It broadcasts, at this point, carousel picture i.e. correspondence and above-mentioned backward carousel to the right, carousel picture corresponds to above-mentioned forward direction carousel to the left；Phase
For mobile terminal, there is also the case where picture realizes picture carousel is slided up and down, at this point, carousel picture corresponds to downwards
In above-mentioned backward carousel, upward carousel picture corresponds to above-mentioned forward direction carousel.
S102: when carousel direction is carousel backward, the picture in the adjacent placeholder of rear side of current placeholder is obtained
Src, and the picture src in the adjacent placeholder of rear side is transferred in current placeholder；
Firstly, the work of preparing in advance before carrying out picture carousel is introduced, specifically, can be pre- in front-end interface
Multiple placeholders are first created, and prestore a picture src in each placeholder, are concurrently set through front-end interface to wherein one
The corresponding image information of picture src in a specified placeholder is shown that the specified placeholder is above-mentioned current occupy-place
Symbol, in addition, the corresponding image information of picture src in other placeholders is hidden during image information display.
As a kind of preferred embodiment, which can also include:
It is adjacent to front side by CSS (Cascading Style Sheets, cascading style sheets) technology in front-end interface
The corresponding image information of picture src in placeholder and the adjacent placeholder of rear side is hidden, and to the figure in current placeholder
The corresponding image information of piece src is shown.
For the hiding of image information, this application provides a kind of more concrete implementation modes, that is, are based on CSS skill
Art realizes, specifically, CSS is a kind of to be used to show HTML (application of standard generalized markup language) or XML (standard is logical
With a subset of markup language) etc. files pattern computer language, can in webpage element position typesetting carry out picture
Almost all of font size pattern is supported in the accurate control of plain grade, possesses the ability to web object and model pattern editor,
Not only can statically modified web page, various scripting languages can also be cooperated dynamically to be formatted to webpage each element.Cause
This can show the corresponding image information of picture src in current placeholder by CSS technology in front-end interface,
The corresponding image information of picture src in other placeholders is hidden.
Further, the backward carousel of picture is carried out, it is to be understood that backward carousel is to the next of current display picture
A picture is shown, namely is shown to the corresponding image information of next picture src, therefore, can from currently account for
Position accords with adjacent the latter placeholder, i.e., obtains picture src in the adjacent placeholder of above-mentioned rear side, and transfer them to current occupy-place
Fu Zhong.
Preferably, it before the above-mentioned picture src by the adjacent placeholder of rear side is transferred in current placeholder, can also wrap
It includes: the current image src in current placeholder is transferred in the adjacent placeholder in front side；By the picture in the adjacent placeholder in front side
Src is transferred in default picture src queue.
Specifically, due to being stored with original picture src in current placeholder in itself, i.e., above-mentioned current image src, but to
Carousel needs to provide memory space for the picture src in the adjacent placeholder of rear side afterwards, therefore, can be transferred to current image src
It, further, can be by picture therein if there is no placeholders before the adjacent placeholder in front side in the adjacent placeholder in front side
Src is transferred in the picture src queue constructed in advance；It, will be each if still having placeholder before the adjacent placeholder in front side
Picture src in a placeholder is successively moved forward.Wherein, picture src queue is preset to be used for according to preset order to each
A picture src is stored, and transferring and being inserted into for picture src is facilitated.
Preferably, it after the above-mentioned picture src by the adjacent placeholder of rear side is transferred in current placeholder, can also wrap
It includes: being transferred in the adjacent placeholder of rear side from new picture src is obtained in default picture src queue.
Specifically, be sky in the adjacent placeholder of rear side, be no longer stored with picture src after completing picture src transfer,
It, can be in default picture src team if there is no placeholders after the adjacent placeholder of rear side to guarantee that picture carousel is uninterrupted
New picture src is obtained in column, and is stored into the adjacent placeholder of rear side；If there are also additional after the adjacent placeholder of rear side
Placeholder then successively shifts forward the picture src in each placeholder after the adjacent placeholder of rear side.
S103: when carousel direction is carousel forward, the picture in the adjacent placeholder in front side of current placeholder is obtained
Src, and the picture src in the adjacent placeholder in front side is transferred in current placeholder；
This step aims at the forward direction carousel of picture, it is to be understood that forward direction carousel is to current display picture
Previous picture is shown, namely is shown to the corresponding image information of a upper picture src, therefore, can from work as
The adjacent previous placeholder of preceding placeholder obtains picture src in the adjacent placeholder in that is, above-mentioned front side, and transfers them to current
In placeholder.
Further, it is similar to above-mentioned backward carousel, it is preferred that the above-mentioned picture src by the adjacent placeholder in front side is shifted
It can also include: that the current image src in current placeholder is transferred to the adjacent placeholder of rear side before into current placeholder
In；Picture src in the adjacent placeholder of rear side is transferred in default picture src queue.It is above-mentioned will be in the adjacent placeholder in front side
Picture src be transferred in current placeholder after, can also include: that new picture src is obtained from default picture src queue
It is transferred in the adjacent placeholder in front side.Process is implemented for it, referring to the specific introduction of aforementioned backward carousel, this Shen
It please details are not described herein.
It is understood that either backward carousel or forward direction carousel, objective be to guarantee current placeholder and its
It is stored with picture src in two adjacent placeholders, the uninterrupted of picture carousel is effectively ensured.
Preferably, transfer of the picture src in each placeholder is realized using js.
In technical solution provided herein, using js (javascript, one kind of webpage development design language)
It realizes transfer of the picture src in each placeholder, and then completes picture carousel.It is, of course, also possible to using other kinds of net
Page exploitation design language, specifically selects type to have no effect on the implementation of the technical program.
S104: showing the corresponding image information of picture src in current placeholder using front-end interface, completes figure
Piece carousel.
The carousel that this step aims at picture is shown, specifically, new picture src is transferred to current placeholder
In, after the transfer for completing picture src, i.e., using front-end interface to the corresponding image of picture src new in current placeholder
Information is shown, so far, completes a picture carousel.
As a kind of preferred embodiment, which can also include: when the adjacent placeholder in front side and rear side phase
When picture src being not present in adjacent placeholder, generating picture carousel terminates to prompt.
Specifically, the quantity due to picture is limited, and when selection forward wheels broadcast mode, when wheel is multicast to the first picture,
A picture will not be had again by continuing carousel forward, or to wheel broadcast mode after selection, when carousel arrives a last picture, continuation is backward
Carousel will not also have picture again, at this point it is possible to which directly generating picture carousel terminates to prompt, to inform viewer's current image wheel
Broadcast end.
It is of course also possible to carry out repeating carousel, i.e., when selection forward wheels broadcast mode, when wheel is multicast to the first picture, continue
Forward carousel will carousel to a last picture, to wheel broadcast mode after selection, when carousel is to a last picture, continue to
Carousel, which will take turns, afterwards is multicast to the first picture.Certainly, both the above implementation is by the customized setting of picture browsing person's progress
Can, the application does not limit this.
Picture carousel method provided herein creates multiple placeholders in front-end interface in advance, and in each occupy-place
A picture src (source file) is prestored in symbol, and then by front-end interface to the corresponding image of picture src in specified placeholder
Information is shown, as a result, when carrying out picture carousel, it is only necessary to which the storage location of picture src is transferred to specified placeholder
In, compared to the prior art, no matter the quantity of carousel picture, this kind of implementation be not necessarily to carry out the primary of the page
Sexploitation operation, in carousel operating process, it is only necessary to guarantee there is picture in two adjacent placeholders of specified placeholder
Src can realize quick picture carousel by transfer picture src storage location, greatly reduce the picture load time, effectively
It avoids carousel picture in the prior art to be easy to the problem of Caton occur in front-end interface, ensure that front end page operation is smooth,
The user experience is improved, and optimizes performance of front end.
On the basis of the above embodiments, referring to FIG. 2, Fig. 2 is a kind of picture carousel method provided herein
Flow diagram, the picture carousel method may include:
S201: preset quantity placeholder is constructed in front-end interface according to the picture load instruction received；Wherein, it presets
The value of quantity is not less than 3；
S202: instruction is loaded according to picture and carries out picture load, obtains preset quantity picture src, and by each picture src
Correspondence is inserted into each placeholder；
S203: any placeholder for being not at marginal position is chosen in each placeholder as current placeholder；
S204: the corresponding image information of current image src in current placeholder is shown using front-end interface；
The present embodiment is intended to describe to the picture preloading procedure of picture carousel process mid-early stage in detail, specifically,
Picture browsing person can initiate picture load instruction based on front-end interface, create preset quantity placeholder at this time, need to illustrate
, herein the quantity of placeholder must not be lower than 3, correspond respectively to above-mentioned current placeholder, the adjacent placeholder in front side and
The adjacent placeholder of rear side, to guarantee before can carrying out at any time to picture carousel and backward picture carousel；Further, according to picture plus
It carries instruction and carries out picture load, such as transfer preset quantity picture src in default picture src queue, and stored respectively to right
In the placeholder answered, at this point, a specified placeholder is for realizing image display function, certainly, which is except the
Any one placeholder except one placeholder and the last one placeholder, i.e., any of the above-described occupy-place for being not at marginal position
Symbol, shows i.e. the corresponding image information of picture src therein as current placeholder, and then using front-end interface
It can.Subsequent pictures carousel operating process can be continued to execute as a result,.
S205: it when receiving the instruction of picture carousel, is instructed according to picture carousel and determines carousel direction；
S206: when carousel direction is carousel backward, the picture in the adjacent placeholder of rear side of current placeholder is obtained
Src, and the picture src in the adjacent placeholder of rear side is transferred in current placeholder；
S207: when carousel direction is carousel forward, the picture in the adjacent placeholder in front side of current placeholder is obtained
Src, and the picture src in the adjacent placeholder in front side is transferred in current placeholder；
S208: showing the corresponding image information of picture src in current placeholder using front-end interface, completes figure
Piece carousel.
Specific implementation process about above-mentioned steps S205 to S208 can refer to the content of previous embodiment, herein no longer into
Row repeats.
On the basis of above-mentioned each embodiment, this application provides a kind of more specifically picture carousel methods, below
For constructing 3 placeholders in advance, picture carousel method provided by the present embodiment is introduced, specific implementation flow
It is as follows:
Step 1: obtaining three picture src when waiting interface to load；
Step 2: the 3 picture src that will acquire are inserted into respectively in three placeholders；
Step 3: picture tiles, and only shows a picture using CSS layout, remaining is hidden, herein, the picture of display
For the corresponding image information of picture src in second placeholder；
Step 4: the slip gesture of detection user；
Step 5: user's slip gesture to the left, picture should carousel (backward carousel) to the right, at this point, by js by third
Picture src in placeholder is placed into second placeholder, and the next picture src that will acquire is placed into third occupy-place
In symbol, original picture src in second placeholder is placed in first placeholder；Wherein, if can not get new
Picture src is placed into third placeholder, then continues to issue the END instruction of picture carousel when carousel；
Step 6: user's slip gesture to the right, picture should carousel (forward direction carousel) to the left, at this point, by js by first
Picture src in placeholder is placed into second placeholder, and the next picture src that will acquire is placed into first occupy-place
In symbol, original picture src in second placeholder is placed in third placeholder；Wherein, if can not get new
Picture src is placed into first placeholder, then continues to issue the END instruction of picture carousel when carousel.
As it can be seen that picture carousel method provided by the embodiment of the present application, creates multiple placeholders in front-end interface in advance, and
A picture src (source file) is prestored in each placeholder, and then by front-end interface to the picture src in specified placeholder
Corresponding image information is shown, as a result, when carrying out picture carousel, it is only necessary to be transferred to the storage location of picture src
In specified placeholder, compared to the prior art, no matter the quantity of carousel picture, this kind of implementation be not necessarily to carry out
The disposable Rendering operations of the page, in carousel operating process, it is only necessary in two adjacent placeholders for guaranteeing specified placeholder
There is picture src, can realize quick picture carousel by transfer picture src storage location, greatly reduce picture load
Time effectively prevents carousel picture in the prior art and is easy to the problem of Caton occur in front-end interface, ensure that front end page
Operation is smooth, and the user experience is improved, and optimizes performance of front end.
To solve the above problems, referring to FIG. 3, the structure that Fig. 3 is a kind of picture wheel broadcasting device provided herein is shown
It is intended to, the picture wheel broadcasting device can include:
Carousel direction determining mould 10, for being instructed according to picture carousel and determining wheel when receiving the instruction of picture carousel
Broadcast direction；
To carousel modules 20 after picture, for obtaining the rear side phase of current placeholder when carousel direction is carousel backward
Picture src in adjacent placeholder, and the picture src in the adjacent placeholder of rear side is transferred in current placeholder；
To carousel modules 30 before picture, for obtaining the front side phase of current placeholder when carousel direction is carousel forward
Picture src in adjacent placeholder, and the picture src in the adjacent placeholder in front side is transferred in current placeholder；
Picture display module 40, for utilizing front-end interface to the corresponding image information of picture src in current placeholder
It is shown, completes picture carousel.
As it can be seen that picture wheel broadcasting device provided by the embodiment of the present application, creates multiple placeholders in front-end interface in advance, and
A picture src (source file) is prestored in each placeholder, and then by front-end interface to the picture src in specified placeholder
Corresponding image information is shown, as a result, when carrying out picture carousel, it is only necessary to be transferred to the storage location of picture src
In specified placeholder, compared to the prior art, no matter the quantity of carousel picture, this kind of implementation be not necessarily to carry out
The disposable Rendering operations of the page, in carousel operating process, it is only necessary in two adjacent placeholders for guaranteeing specified placeholder
There is picture src, can realize quick picture carousel by transfer picture src storage location, greatly reduce picture load
Time effectively prevents carousel picture in the prior art and is easy to the problem of Caton occur in front-end interface, ensure that front end page
Operation is smooth, and the user experience is improved, and optimizes performance of front end.
As a kind of preferred embodiment, which can also include picture preloaded components, connect for basis
The picture load instruction received constructs preset quantity placeholder in front-end interface；Wherein, the value of preset quantity is not less than 3；
Picture load is carried out according to picture load instruction, obtains preset quantity picture src, and each picture src is corresponded to and is inserted into respectively
In placeholder；Any placeholder for being not at marginal position is chosen in each placeholder as current placeholder；Utilize front end circle
The corresponding image information of current image src in current placeholder is shown.
As a kind of preferred embodiment, can also be used in after above-mentioned picture to carousel modules 20 will be current in current placeholder
Picture src is transferred in the adjacent placeholder in front side；Picture src in the adjacent placeholder in front side is transferred to default picture src team
In column.
As a kind of preferred embodiment, can also be used in from default picture src queue after above-mentioned picture to carousel modules 20
New picture src is obtained to be transferred in the adjacent placeholder of rear side.
As a kind of preferred embodiment, which can also include that carousel terminates cue module, for current
When picture src being not present in the adjacent placeholder in side and the adjacent placeholder of rear side, generating picture carousel terminates to prompt.
As a kind of preferred embodiment, which can also include front end picture pre-display module, be used for
In front-end interface, the corresponding image of picture src in the adjacent placeholder in front side and the adjacent placeholder of rear side is believed by CSS technology
Breath is hidden, and is shown to the corresponding image information of picture src in current placeholder.
Above method embodiment is please referred to for the introduction of device provided by the present application, this will not be repeated here by the application.
To solve the above problems, referring to FIG. 4, the structure that Fig. 4 is a kind of picture carousel equipment provided herein is shown
It is intended to, the picture carousel equipment can include:
Memory 1, for storing computer program；
Processor 2, realizes following steps when for executing computer program:
When receiving the instruction of picture carousel, is instructed according to picture carousel and determine carousel direction；When carousel direction is backward
When carousel, the picture src in the adjacent placeholder of rear side of current placeholder is obtained, and by the picture in the adjacent placeholder of rear side
Src is transferred in current placeholder；When carousel direction is carousel forward, obtain in the adjacent placeholder in front side of current placeholder
Picture src, and the picture src in the adjacent placeholder in front side is transferred in current placeholder；Using front-end interface to current
The corresponding image information of picture src in placeholder is shown, picture carousel is completed.
Above method embodiment is please referred to for the introduction of equipment provided by the present application, this will not be repeated here by the application.
To solve the above problems, present invention also provides a kind of computer readable storage medium, the computer-readable storage
It is stored with computer program on medium, can be realized when computer program is executed by processor following rapid:
When receiving the instruction of picture carousel, is instructed according to picture carousel and determine carousel direction；When carousel direction is backward
When carousel, the picture src in the adjacent placeholder of rear side of current placeholder is obtained, and by the picture in the adjacent placeholder of rear side
Src is transferred in current placeholder；When carousel direction is carousel forward, obtain in the adjacent placeholder in front side of current placeholder
Picture src, and the picture src in the adjacent placeholder in front side is transferred in current placeholder；Using front-end interface to current
The corresponding image information of picture src in placeholder is shown, picture carousel is completed.
The computer readable storage medium may include: USB flash disk, mobile hard disk, read-only memory (Read-Only
Memory, ROM), random access memory (Random Access Memory, RAM), magnetic or disk etc. is various to deposit
Store up the medium of program code.
Above method embodiment is please referred to for the introduction of computer readable storage medium provided by the present application, the application exists
This is not repeated them here.
Each embodiment is described in a progressive manner in specification, the highlights of each of the examples are with other realities
The difference of example is applied, the same or similar parts in each embodiment may refer to each other.For device disclosed in embodiment
Speech, since it is corresponded to the methods disclosed in the examples, so being described relatively simple, related place is referring to method part illustration
.
Professional further appreciates that, unit described in conjunction with the examples disclosed in the embodiments of the present disclosure
And algorithm steps, can be realized with electronic hardware, computer software, or a combination of the two, in order to clearly demonstrate hardware and
The interchangeability of software generally describes each exemplary composition and step according to function in the above description.These
Function is implemented in hardware or software actually, the specific application and design constraint depending on technical solution.Profession
Technical staff can use different methods to achieve the described function each specific application, but this realization is not answered
Think beyond scope of the present application.
The step of method described in conjunction with the examples disclosed in this document or algorithm, can directly be held with hardware, processor
The combination of capable software module or the two is implemented.Software module can be placed in random access memory (RAM), memory, read-only deposit
Reservoir (ROM), electrically programmable ROM, electrically erasable ROM, register, hard disk, moveable magnetic disc, CD-ROM or technology
In any other form of storage medium well known in field.
Picture carousel method provided herein, device, equipment and computer readable storage medium are carried out above
It is discussed in detail.Specific examples are used herein to illustrate the principle and implementation manner of the present application, above embodiments
Explanation be merely used to help understand the present processes and its core concept.It should be pointed out that for the common of the art
For technical staff, under the premise of not departing from the application principle, can also to the application, some improvement and modification can also be carried out, these
Improvement and modification also fall into the protection scope element of the claim of this application.
Claims (10)
1. a kind of picture carousel method characterized by comprising
When receiving the instruction of picture carousel, is instructed according to the picture carousel and determine carousel direction；
When the carousel direction is carousel backward, the picture src in the adjacent placeholder of rear side of current placeholder is obtained, and will
Picture src in the adjacent placeholder of the rear side is transferred in the current placeholder；
When the carousel direction is carousel forward, the picture src in the adjacent placeholder in front side of current placeholder is obtained, and will
Picture src in the adjacent placeholder in the front side is transferred in the current placeholder；
The corresponding image information of picture src in the current placeholder is shown using front-end interface, completes picture wheel
It broadcasts.
2. picture carousel method as described in claim 1, which is characterized in that described when receiving the instruction of picture carousel, root
It is instructed before determining carousel direction according to the picture carousel, further includes:
Preset quantity placeholder is constructed in the front-end interface according to the picture load instruction received；Wherein, described default
The value of quantity is not less than 3；
Instruction is loaded according to the picture and carries out picture load, obtains the preset quantity picture src, and by each picture
Src correspondence is inserted into each placeholder；
Any placeholder for being not at marginal position is chosen in each placeholder as the current placeholder；
The corresponding image information of current image src in the current placeholder is shown using the front-end interface.
3. picture carousel method as claimed in claim 2, which is characterized in that the figure by the adjacent placeholder of the rear side
Before piece src is transferred in the current placeholder, further includes:
Current image src in the current placeholder is transferred in the adjacent placeholder in the front side；
Picture src in the adjacent placeholder in the front side is transferred in default picture src queue.
4. picture carousel method as claimed in claim 3, which is characterized in that the figure by the adjacent placeholder of the rear side
After piece src is transferred in the current placeholder, further includes:
New picture src is obtained from the default picture src queue to be transferred in the adjacent placeholder of the rear side.
5. picture carousel method as described in claim 1, which is characterized in that further include:
When the picture src is not present in the adjacent placeholder in the front side and the adjacent placeholder of the rear side, picture wheel is generated
Broadcast end prompt.
6. the picture carousel method as described in claim 1 to 5 any one, which is characterized in that further include:
In the front-end interface, by CSS technology in the adjacent placeholder in the front side and the adjacent placeholder of the rear side
The corresponding image information of picture src is hidden, and is carried out to the corresponding image information of picture src in the current placeholder
Display.
7. picture carousel method as claimed in claim 6, which is characterized in that realize the picture src each described using js
Transfer in placeholder.
8. a kind of picture wheel broadcasting device characterized by comprising
Carousel direction determining mould, for being instructed according to the picture carousel and determining carousel when receiving the instruction of picture carousel
Direction；
To carousel modules after picture, for when the carousel direction is carousel backward, the rear side for obtaining current placeholder to be adjacent
Picture src in placeholder, and the picture src in the adjacent placeholder of the rear side is transferred in the current placeholder；
To carousel modules before picture, for when the carousel direction is carousel forward, the front side for obtaining current placeholder to be adjacent
Picture src in placeholder, and the picture src in the adjacent placeholder in the front side is transferred in the current placeholder；
Picture display module, for using front-end interface to the corresponding image information of picture src in the current placeholder into
Row display, completes picture carousel.
9. a kind of picture carousel equipment, which is characterized in that further include:
Memory, for storing computer program；
Processor realizes picture carousel side as claimed in any one of claims 1 to 7 when for executing the computer program
The step of method.
10. a kind of computer readable storage medium, which is characterized in that be stored with computer on the computer readable storage medium
Program, the computer program realize picture carousel method as claimed in any one of claims 1 to 7 when being executed by processor
The step of.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910657510.9A CN110399504A (en) | 2019-07-19 | 2019-07-19 | A kind of picture carousel method, device, equipment and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910657510.9A CN110399504A (en) | 2019-07-19 | 2019-07-19 | A kind of picture carousel method, device, equipment and computer readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110399504A true CN110399504A (en) | 2019-11-01 |
Family
ID=68325297
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910657510.9A Pending CN110399504A (en) | 2019-07-19 | 2019-07-19 | A kind of picture carousel method, device, equipment and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110399504A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111428065A (en) * | 2020-03-23 | 2020-07-17 | 北京明略软件系统有限公司 | Picture carousel method, device and equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102316384A (en) * | 2011-09-08 | 2012-01-11 | 中兴通讯股份有限公司 | Page multigraph switching realization method and embedded browser of interactive personality TV (IPTV) |
| CN106708526A (en) * | 2016-12-28 | 2017-05-24 | 金蝶软件（中国）有限公司 | Carousel graph setting method and system |
| CN109726343A (en) * | 2018-12-26 | 2019-05-07 | 北京字节跳动网络技术有限公司 | Image carousel method and device |
-
2019
- 2019-07-19 CN CN201910657510.9A patent/CN110399504A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102316384A (en) * | 2011-09-08 | 2012-01-11 | 中兴通讯股份有限公司 | Page multigraph switching realization method and embedded browser of interactive personality TV (IPTV) |
| CN106708526A (en) * | 2016-12-28 | 2017-05-24 | 金蝶软件（中国）有限公司 | Carousel graph setting method and system |
| CN109726343A (en) * | 2018-12-26 | 2019-05-07 | 北京字节跳动网络技术有限公司 | Image carousel method and device |
Non-Patent Citations (4)
| Title |
|---|
| L_HAOZI: "https://zhidao.baidu.com/question/565760650221041724.html", 《百度知道》 * |
| 梁书娟等: "结合CSS和Javascript技术实现图片轮播效果", 《信息与电脑(理论版)》 * |
| 赵露: "基于HTML+CSS+JavaScript实现Web页中多功能焦点图轮播效果", 《九江学院学报(自然科学版)》 * |
| 陆校松: "基于jQuery技术的焦点图轮播效果设计与实现", 《福建电脑》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111428065A (en) * | 2020-03-23 | 2020-07-17 | 北京明略软件系统有限公司 | Picture carousel method, device and equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2022001508A1 (en) | Video special effect processing method and apparatus, and electronic device | |
| US7900132B2 (en) | Method and system to process an electronic form | |
| CN102799573B (en) | Method and system for annotating webpage | |
| CN102541831B (en) | Method and device for serializing document editing commands | |
| US20160098250A1 (en) | Application prototyping tool | |
| US10014030B2 (en) | Method, device and system for playing video | |
| KR20120022793A (en) | Media timeline interaction | |
| US9015574B2 (en) | Apparatus, system and method for a vector-based form field document | |
| JP2006107435A (en) | Method, system, and computer-readable medium for creating, inserting, and reusing document parts in electronic document | |
| CN105930467A (en) | Information processing method and electronic device | |
| WO2020220773A1 (en) | Method and apparatus for displaying picture preview information, electronic device and computer-readable storage medium | |
| CN107908401A (en) | Multimedia file producing method based on Unity engines | |
| CN113066515B (en) | Optical disc recording method, computing equipment and readable storage medium | |
| CN107318038B (en) | Method for synchronizing video playing and comment, terminal equipment and storage medium | |
| US8209662B2 (en) | Application retargeting | |
| AU2011352078B2 (en) | Systems, methods, and interfaces for pagination and display on an access device | |
| US20170192731A1 (en) | Control redistribution among multiple devices | |
| CN110618848A (en) | Page display method, device, equipment and storage medium | |
| CN110399504A (en) | A kind of picture carousel method, device, equipment and computer readable storage medium | |
| CN102736910B (en) | A kind of general command interface based on plug-in unit defines method | |
| CN105359131A (en) | Tethered selection handle | |
| CN105808519A (en) | Document display method and apparatus | |
| CN102663581A (en) | Method and apparatus for storing event scheduling | |
| US20200034024A1 (en) | Terminal, view character copying method thereof, and storage apparatus | |
| CN112068925A (en) | File uploading method and device based on WebUploader component, electronic equipment and readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191101 |
|
| RJ01 | Rejection of invention patent application after publication |