This article shares two implementation methods for JavaScript to implement pattern carousel effects for your reference. The specific content is as follows
The first type:Simple carousel with buttons
Introduction: The left and right buttons control the carousel, click the left button to switch the previous picture, click the right button to switch the next picture
The html is as follows:
<div class="box">
<div class="imgbox">
<a><img src="img/" alt=""></a>
<a><img src="img/" alt=""></a>
<a><img src="img/" alt=""></a>
<a><img src="img/" alt=""></a>
<a><img src="img/" alt=""></a>
</div>
<div class="btns">
<input type="button" value="<<<">
<input type="button" value=">>>">
</div>
CSS is as follows:
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.box .imgbox{}
.imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{width: 1000px;height: 300px;}
.btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0;}
#right{right: 0;}}
js is as follows:
class Banner{
constructor(){
= ("left");
= ("right");
= (".imgbox a");
// I'm going to come in = 0;
// I'm leaving = - 1;
}
init(){
var that = this;
("click",function(){
(1);
})
("click",function(){
(2);
})
}
changeIndex(direct){
if(direct == 1){
if( == 0){
= -1;
= 0;
}else{
--;
= + 1;
}
}else{
if( == -1){
= 0;
= -1;
}else{
++;
// The index to go is always the index that comes in -1 = - 1;
}
}
// Start movement according to the index (direct);
}
move(direct){
if(direct == 1){
// iPrev goes // From 0 to 1000 []. = 0;
move([],{left:1000});
// iNow comes in // From -1000, enter 0 []. = -1000 + "px";
move([],{left:0});
}else{
[]. = 0;
move([],{left:-1000});
[]. = 1000 + "px";
move([],{left:0});
}
}
}
var b = new Banner();
();
The second type:Automatic carousel
Introduction: Two left and right buttons can control the left and right switching of the picture. The button with numbers is below. Click the number to switch to the first picture. During the automatic carousel, the mouse enters and stops the carousel, and the mouse leaves to continue the carousel.
The htm code is as follows:
<div class="box">
<div class="imgbox">
<a><img src="../img/" alt=""></a>
<a><img src="../img/" alt=""></a>
<a><img src="../img/" alt=""></a>
<a><img src="../img/" alt=""></a>
<a><img src="../img/" alt=""></a>
</div>
<div class="btns">
<input type="button" value="<<<">
<input type="button" value=">>>">
</div>
<div class="list">
</div>
</div>
The css code is as follows:
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.box .imgbox{}
.imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{width: 1000px;height: 300px;}
.btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0;}
#right{right: 0;}
.list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
.list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list {background: red;color: #fff;}
The js code is as follows:
class Banner{
constructor(){
= ("left");
= ("right");
= (".imgbox a");
= (".list");
= (".box");
= 0;
= - 1;
}
init(){
var that = this;
("click",function(){
(1);
})
("click",function(){
(-1);
})
// L3. Event delegate binding event = function(eve){
var e = eve || ;
var tar = || ;
if( == "SPAN"){
// L4. When the event is triggered, change the index and pass the span clicked in front of the point in the (tar);
}
}
}
changeIndex(direct){
if(direct == 1){
if( == 0){
= -1;
= 0;
}else{
--;
= + 1;
}
}else{
if( == -1){
= 0;
= -1;
}else{
++;
= - 1;
}
}
(direct);
}
move(direct){
// According to the status of the left and right buttons: left 1, right -1 // Use multiplication // Change the direction of different buttons []. = 0;
move([],{left:[0].offsetWidth * direct});
[]. = -[0].offsetWidth * direct + "px";
move([],{left:0});
();
}
createList(){
// L1. Create a span corresponding to the number of pictures and number it at the same time var str = ``;
for(var i=0;i<;i++){
str += `<span index='${i}'>${i+1}</span>`;
}
= str;
// L2. Set the default current item ();
}
setActive(){
for(var i=0;i<;i++){
[i].className = "";
}
[].className = "active";
}
listChangeIndex(tar){
// L5. Determine the index to go and the index to come in // I'm leaving // Get the number of the span you clicked to come in var index = parseInt(("index"));
// (, index);
// L6-1.Judge direction if(index > ){
// L7-1. Move to the left (1,index);
}
// L6-2.Judge direction if(index < ){
// L7-2. Move to the right (-1,index);
}
// L8. Set the index of the current click to the index to go next time = index;
// L9. Set the current item according to the modified index ();
}
listMove(direct,index){
// Walk // Where to go, where to go []. = 0;
move([],{left:-1000 * direct})
// index comes in // Where to come in, where to enter [index]. = 1000 * direct + "px";
move([index],{left:0});
}
autoPlay(){
var t = setInterval(()=>{
(-1);
},2000)
= function(){
clearInterval(t);
}
var that = this;
= function(){
t = setInterval(()=>{
(-1);
},2000)
}
// (that);
}
}
var b = new Banner();
();
();
();
The move in js is a buffer motion encapsulation, the code is as follows:
function move(ele,obj,cb){
clearInterval();
= setInterval(() => {
// Assume that the state is: the timer can be cleared var i = true;
// Because the information in the object is only started to be used in the timer, it is traversed in the timer // and the attributes and target variables exchanged in advance for(var attr in obj){
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (obj[attr] - iNow)/10;
speed = speed < 0 ? (speed) : (speed);
// As long as there is an attribute to the target, it will stop, it is not correct // All attributes must be reached to the target before they can stop
// As long as there is an attribute that does not reach the target, you must not stop // Use status to mark whether to stop the timer
// As long as there is an attribute that does not reach the target: the timer must not be cleared if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
= (iNow + speed)/100;
}else{
[attr] = iNow + speed + "px";
}
}
// If each timer execution ends and all attributes are executed once, the status is still true, which means that it has not been changed to false. If it has not been changed to false, it means that no attribute has not reached the end point, then the status is still false and will not be cleared if(i){
clearInterval();
// The user decides to execute the function at the end of the animation. If the user does not pass the parameters, make a default judgment if(cb){
cb();
}
// cb && cb();
}
}, 30);
}
function getStyle(ele,attr){
if(){
return [attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
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.