Mobile-native JS,CSS3 for carousel mapping

First, functional requirements

1. Auto Play
2. Slide switch
3. Click Switch

Second, the Thinking analysis

HTML code:

<div class= "Container" >
<ul class= "List Clearfix" >
<li class= "Item fl item5" > Figure 5</li>
<li class= "Item fl item1" > Figure 1</li>
<li class= "Item FL" > Figure 2</li>
<li class= "Item FL" > Figure 3</li>
<li class= "Item FL" > Figure 4</li>
<li class= "Item fl item5" > Figure 5</li>
<li class= "Item fl item1" > Figure 1</li>
</ul>
<ul class= "List-btn clearfix" >
<li class= "btn choosed" ></li>
<li class= "BTN" ></li>
<li class= "BTN" ></li>
<li class= "BTN" ></li>
<li class= "BTN" ></li>
</ul>
</div>

CSS code:

/* Carousel Chart Style */
. container{
width:100%;
Height:6rem;
Overflow:hidden;
position:relative;
}
. list{
height:100%;
Position:absolute;
Width:100rem;
Background-color:pink;
Transform:translatex ( -10rem);
}
. item{
height:100%;
Width:10rem;
Text-align:center;
Line-height:3rem;
Font-size:2rem;
border:1px solid #fff;

}
. item1{
Background-color:yellowgreen;
}
. item5{
Background-color:skyblue;
}

/* Button */
. list-btn{
Position:absolute;
left:50%;
Transform:translatex (-50%);
Bottom:1rem;

}
. btn{
Float:left;
Width:0.5rem;
Height:0.5rem;
border-radius:50%;
margin-right:10px;
Background-color: #fff;
}
. choosed{
Background-color:blue;
}

General idea: The picture list is placed in UL, by setting the displacement of UL list to realize the switch of the picture.

1, timer to achieve automatic playback

Use index value Index to locate the Translatex attribute value of the UL list and use the timer to control the increase of index. The displacement of the UL list is calculated based on the size of index and the width of the image. To solve the problem of flashing the first picture, add a picture at the end. See the HTML code section for details

2. Slide switch

Using touch events, record the sliding distance, and then according to the sliding distance to judge, when more than a certain value, the implementation of the image switch, lower than the value of the time, the picture stays in the original position

3. Click the button to toggle

Click the Check button to display the corresponding picture. Also add the selected background color to the corresponding button

Third, the focus has come

JS code, the comments are clear, there is not clear can leave a message

Implementation features:
1. Auto Play
2. Slide switch
3. Click Switch
Window.onload = function () {
Slide picture, List move
var list = Document.queryselector ('. List ');

Record the index value of the current display picture
var index = 1;
1. Auto Play
var timer; Defining timers
Autoslide ();

2. Slide switch
Define variables record sliding start coordinates, sliding distance, sliding end coordinates
var StartX = 0,
MoveX = 0,
Distacenx = 0,
Srem = document.queryselector (' HTML '). Style.fontsize;
List.addeventlistener (' Touchstart ', function (e) {
Clear the timer when sliding, clear the gradient properties

Clearinterval (timer);
Removetransition (list);

StartX = E.touches[0].clientx;
});
List.addeventlistener (' Touchmove ', function (e) {
MoveX = E.touches[0].clientx;

Distancex = Movex-startx;

Distancex = Distancex/parseint (Srem);

Change the displacement of the picture list according to the sliding distance
Slidex (list, index * 10-distancex);
})
List.addeventlistener (' Touchend ', function (e) {
if (Math.Abs (Distancex) >= 5 && Distancex < 0) {
index++;
}
if (Math.Abs (Distancex) >= 5 && Distancex > 0) {

index--;
}

Addtransition (list);
Slidex (list, index * 10);

Swipe to end, determine whether to the last one, or the first one
if (index = = 6) {
index = 1;
SetTimeout (function () {

Removetransition (list);
Slidex (list, index * 10);
}, 500)

}

if (index = = 0) {
SetTimeout (function () {
index = 5;
Removetransition (list);
Slidex (list, index * 10);
}, 500)
}

ADDBGC ();
Swipe to end, add timer
Autoslide ();
})

3. Click Switch
var btns = Document.queryselectorall ('. btn ');
Btns.foreach (function (v, i) {
V.addeventlistener (' click ', Function (e) {
Add a background color to the clicked button

Clear Timer
Clearinterval (timer);
Removetransition (list);
index = i + 1;
Slidex (list, index * 10);
Add a background color to a button
ADDBGC ();
Recovery timer
Autoslide ();
})
})

Tool functions
Implement displacement
function Slidex (v, x) {

V.style.transform = ' TranslateX (-' + x + ' rem) ';
V.style.webkittransform = ' TranslateX (-' + x + ' rem) ';
}
Add Gradient Properties
function Addtransition (v) {
V.style.transition = "All 0.5s";
V.style.webkittransition = "All 0.5s";
}
Remove Gradient Properties
function Removetransition (v) {

V.style.transition = ' None ';
V.style.webkittransition = ' None ';
}

Add a background to a button
function ADDBGC () {
Btns.foreach (function (v, i) {
V.classname = ' btn ';
if (i + 1 = = index) {
V.classname = ' btn choosed ';
}
})
}

Set the timer to let the picture carousel
function Autoslide () {
Timer = setinterval (function () {

index++;
Addtransition (list);
Slidex (list, index * 10);
Add a background color to a button

if (index = = 6) {
index = 1;
SetTimeout (function () {

Removetransition (list);
Slidex (list, index * 10);
}, 500)

}

ADDBGC ();

}, 1000);
Console.log (timer)
}

}

Iv. remarks

Because it is adapted with REM, there is a corresponding unit conversion in the JS code, PX to REM

------------------------------------------------------------------------

------------------------------------------------------------------------

------------------------------------------------------------------------

The work of such a carousel diagram is very common, although the online plug-in can achieve this effect, but they do not feel the same knock out. I hope to be of help to our friends.

Mobile-native JS,CSS3 for carousel mapping