There are many ways to implement carousels in JavaScript, and the implementation methods of mobile desktops are similar. The specific core implementation principles are nothing more than the following key points. Right now:
1. Determine the playback direction. Generally, it is horizontal carousel, and of course, the possibility of vertical demand is not ruled out. Of course there is also reverse playback situation, this customization.
2. Processing the first picture. If the first one is currently, then if you continue to slide forward (that is, the reverse direction of your playback), then there will be blank (if you allow it to continue sliding, but it doesn't mean that you don't allow it to slide, unless you want to carousel back and forth, I have also explained this in another article using jQuery). At this time, you should let the last picture of the picture that should be carouseled to achieve seamless connection.
3. Processing of the last picture. Like the first picture, you need to display the first picture while continuing to slide for seamless connection.
4. Handle marks following the origin. This requires a rigorous logical judgment on the arrangement of the origin and subscript.
Here is a carousel effect on the mobile terminal, pure JavaScript native implementation, which should be said to be very close to the actual work. Please take a look。
Note: If you want to achieve the same effect as me, please be sure to write it in my style and architecture.
HTML part
<div > <ul > <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> <ul > <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
CSS part
*{ margin: 0;padding: 0; }
html,body{ height: 100%;}
#box{
width: 100%;
overflow: hidden;
position: relative;
}
#box #lilist{
/* Width is dynamically determined based on the number of child elements */
/*width: 500%;*/
position: relative;
float: left;
white-space: nowrap;
list-style: none;
overflow: hidden;
}
#box #lilist li{
float: left;
height: 200px;
}
#box #lilist li img{
display: block;
width: 100%;
height: 100%;
object-fit: fill;
}
#box #items{
position: absolute;
list-style: none;
width: 30%;
bottom: 10px;
left: 35%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
#box #items li{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
}
#box #items .active{
background-color: red;
}
Here comes the point, JavaScript native code:
= function(){
var totalli1 = ("#box>#lilist>li");
var totalli2 = ("#box>#items>li");
// Dynamically change the width of the carousel map changewidth();
function changewidth(){
var newstyle = ("style");
var mycss = "#lilist{ width : "++"00% }";
mycss += "#lilist li{ width : "+(100/)+"% }"
= mycss;
(newstyle);
}
var getbox = ("box");
var getlist = ("lilist");
var startx = 0, endx = 0, disx = 0;
var listleft = 0, finalx = 0;
var windowx = ;
var listx = ;
var moveindex = 0;
// Automatic carousel control variables var num = 1, index = 0;
// Let him slide left first transforms(getlist,"translateX",-windowx);
("touchstart",function(event){
let touch = [0];
startx = ;
// Determine the first position and reposition. The mouse must be changed as soon as it is placed on it. Otherwise, if the move moves and changes it again, it will conflict with the moving transform, and it cannot be switched when the mouse leaves, which will affect the sliding effect of the moving. This process is done instantly, and no transitions or animations are allowed, making it appear smooth. let lastx = (-transforms(getlist,"translateX")/windowx);
if(lastx<1){
lastx = -2;
}else if(lastx>-2){
lastx = 1;
}
// Move to the specified location transforms(getlist,"translateX",-lastx*windowx);
// Assign a value to listleft listleft = transforms(getlist,"translateX");
// Clear overbuffer = "none";
// Clear the timer (timer);
})
("touchmove",function(event){
let touch = [0];
endx = ;
disx = endx - startx;
finalx = disx+listleft;
transforms(getlist,"translateX",finalx)
})
("touchend",function(event){
let touch = [0];
// The number of sliding screen widths. let lastx = 0;
// ul The ratio of the distance from the left side of the screen to the width of the screen lastx = (-transforms(getlist,"translateX")/windowx);
if(lastx<=0){
lastx = 0;
}else if(lastx>-1){
lastx = -1;
}
transforms(getlist,"translateX",-lastx*windowx);
= "transform 0.3s";
// Follow the red dot in the lower part to get the subscript. Please pay attention to the meaning of the following numbers, 4, 5, 6, you can think about it yourself moveindex = lastx-1;
if(lastx==1||lastx==6){
moveindex = 0;
}else if(lastx==0||lastx==5){
moveindex = 4;
}
movecircle(moveindex);
// Add timer again, automatically rotate timer = (playself,3000);
// Change the values of num and index to determine the timer start position (moveindex+"。。。"+lastx)
index = moveindex;
num = lastx;
})
// Automatic carousel var timer = (playself,3000);
function playself(){
// Clear transitional residues = "none";
if(num==-1){
transforms(getlist,"translateX",-windowx);
num = 1;
}
// Add a one-time timer to separate the conflicts with interval setTimeout(function(){
transforms(getlist,"translateX",-windowx*(++num));
= "transform 0.5s";
// The origin follows the movement index++;
if(index==){
index = 0;
totalli2[index].("active");
}
movecircle(index);
},1)
}
// Red dot move function function movecircle(getindex){
for(let i=0;i<;i++){
totalli2[i].("active");
if(getindex==i){
totalli2[getindex].("active");
}
}
}
}
The code also has some flaws in the algorithm. I am stupid and can only think of this method at present. Some variables may occupy too much memory. I hope you will only use it for reference. If any master points out the problem, I am very grateful. Finally, I sincerely thank those who are destined to watch! I wish you a happy life and a smooth work!
Summarize
This is the article about JavaScript implementing the carousel effect of mobile transition animation. For more related js transition carousel content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!