Today, mobile web pages also occupy a considerable proportion in the market, and the carousel image effect on mobile terminals is also very common. Today I will record the effect of implementing a set of available fingers suitable for mobile terminals toggle and switch carousel images.
The main technical point of this effect relies on touch events unique to touch screen devices; OK, let's get to the topic next.
First of allhtml layout：
1. What is emphasized here is to remember to add the palatable attribute of viewport to the html.
2. Since you need to switch to the last and first picture when you move the first picture and the last picture, in order to achieve the ideal effect, you need to add the last picture in front of the first picture and add the first picture after the last picture.
3. f_l represents the left floating
**html code is as follows: **
<ul class='banner_imgs clearfix'> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> <li class='f_l'> <a href="#"><img src="image/" alt="" /></a> </li> </ul> <!-- Carousel pictures index --> <ul class="banner_index clearfix"> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Next iscss style：
Note that there is no regular reset style code added here
.jd_banner .banner_imgs {
/* 10 times the screen width */
width: 1000%;
}
.jd_banner .banner_imgs li {
/* Double the screen width */
width: 10%;
}
.jd_banner .banner_imgs li a {
display: block;
width: 100%;
}
.jd_banner .banner_imgs li a img {
display: block;
width: 100%;
}
.jd_banner .banner_index {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -64px;
}
.jd_banner .banner_index li {
float: left;
width: 6px;
height: 6px;
border: 1px solid white;
border-radius: 50%;
margin: 0 5px;
}
.jd_banner .banner_index {
background-color: #fff;
}
Finally, the most importantjs codeIt's
1. The effect triggered after the transition ends. Here, it mainly ensures that the image is switched to the last image we manually added, and switch back to the real first image;
2. Three elements of the touch event: touchstart--When the finger is pressed, touchmove--When the finger moves, touchend--When the finger releases the screen;
3. [0].clientX gets the position when pressing a finger, and can print out the event to see what attributes it contains;
= function() {
slide();
}
function slide() {
var bannerImgs = (".banner_imgs");
var Indexs = (".banner_index li");
var imgLis = (".banner_imgs li");
//Screen Width var screenWidth = ;
var index = 1;
//The default display should be the second image = "translateX(" + screenWidth * index * -1 + "px)";
//Add transition effect function setTransition() {
= "all .2s";
= "all .2s";
}
//Clear the transition effect function clearTransition() {
= "none";
= "none";
}
//Set the movement distance function setTranslateX(distance) {
= "translateX(" + distance + "px)";
= "translateX(" + distance + "px)";
}
//Control small dots function setPoint() {
for (var i = 0; i < ; i++) {
Indexs[i].className = "";
}
Indexs[index - 1].className = "current";
}
//Set the timer var timer = setInterval(function() {
index++;
setTransition();
setTranslateX(screenWidth * index * -1);
}, 1000);
//Add transition animation end event ("transitionend", function() {
if (index > 8) {
index = 1;
} else if (index < 1) {
index = 8;
}
clearTransition();
setTranslateX(screenWidth * index * -1);
setPoint();
})
//Add touch event var startX = 0;
var moveX = 0;
var isMove = false;
("touchstart", function(event) {
isMove = false;
clearInterval(timer);
startX = [0].clientX;
})
("touchmove", function(event) {
isMove = true;
moveX = [0].clientX - startX;
setTranslateX(moveX + index * screenWidth * -1);
})
("touchend", function(event) {
if(isMove && (moveX) > screenWidth/3){
if (moveX < 0) {
index++;
} else if (moveX > 0) {
index--;
}
}
setTransition();
setTranslateX(index * screenWidth * -1);
timer = setInterval(function() {
index++;
setTransition();
setTranslateX(screenWidth * index * -1);
}, 1000);
})
}
Wonderful topic sharing:jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.