JS implementation of carousel carousel case

This article example shares the specific code of JS to implement the carousel carousel for your reference. The specific content is as follows

Effect:

The arrangement of each picture is symmetrical with respect to the middle. The image sizes and transparency are different, but the styles of the symmetrical images are the same, presenting a three-dimensional carousel effect.

Carousel dynamic effect picture:

Let’s look at the code first:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Carousel slideshow</title>
    <link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
            <a href="javascript:void(0);" class="next" id="arrRight"></a>
        </div>
    </div>
</div>
</body>
<script>
    //Define an array and use absolute positioning to set the positions of the five li var config = [
        {
            width: 400,
            top: 20,
            left: 50,
            opacity: 0.2,
            zIndex: 2
        },
        {
            width: 600,
            top: 70,
            left: 0,
            opacity: 0.8,
            zIndex: 3
        },
        {
            width: 800,
            top: 100,
            left: 200,
            opacity: 1,
            zIndex: 4
        },
        {
            width: 600,
            top: 70,
            left: 600,
            opacity: 0.8,
            zIndex: 3
        },
        {
            width: 400,
            top: 20,
            left: 750,
            opacity: 0.2,
            zIndex: 2
        }
    ];
    //Page loading event window.onload = function () {
        var flag = true; //Assume all animations are finished //The pictures are spread out var list = my$("slide").getElementsByTagName("li");
        function assgin() {
            for (var i=0;i<list.length;i++) {
                //Set each li to make the wide level transparency left top reach the specified target position animate(list[i],config[i],function () {
                    flag = true;
                });
            }
        }
        assgin();
 
        //Set the click event for the button //The button image on the right rotates clockwise and the first element of the array is placed at the end/*
             pop() deletes the last element push() adds an element to the end shift() deletes the first element unshift() adds an element to the front of the array*/
        my$("arrRight").onclick = function(){
            if (flag){
                flag = false;
                config.push(config.shift());
                assgin(); //Reassign }
        };
        //The left button image rotates counterclockwise and the last element of the array is placed at the beginning my$("arrLeft").onclick = function(){
            if (flag){
                flag = false;
                config.unshift(config.pop());
                assgin(); //Reassign }
        };
 
        //When the mouse enters the left and right focus divs, it will display my$("wrap").onmouseover = function () {
            animate(my$("arrow"),{"opacity":1});
        };
        //When the mouse leaves the left or right focus div, it hides my$("wrap").onmouseout = function () {
            animate(my$("arrow"),{"opacity":0});
        };
    };
 
    //Get element by id function my$(id) {
        return document.getElementById(id);
    }
 
    //Get the value of any style attribute of any element function getAttrValue(element,attr) {
        return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
    }
 
    // animation function animate(element,json,fn) {
        clearInterval(element.timeId);
        element.timeId=setInterval(function () {
            var flag = true; // Assume that the goal has been achieved for (var attr in json) {
                if(attr=="opacity"){//Determine whether the attribute is opacity
                    var current = getAttrValue(element,attr)*100;
                    //How many steps to move each timevar target=json[attr]*100;//Assign the value to a variable directly, and the following code does not need to be changedvar step=(target-current)/10;//(target-current)/10
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current=current+step;
                    element.style[attr]=current/100;
                }else if(attr=="zIndex"){//Judge whether the attribute is zIndex
                    element.style[attr]=json[attr];
                }else{//Ordinary attributes//Get the current position----getAttrValue(element,attr) gets the string type var current= parseInt(getAttrValue(element,attr))||0;
                    //How many steps to move each timevar target=json[attr];//Assign directly to a variable, no need to change the following codevar step=(target-current)/10;//(target-current)/10
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current=current+step;
                    element.style[attr]=current+"px";
                }
                if(current!=target){
                    flag=false; //If the target result is not reached, it will be false
                }
            }
            if(flag){//The result is true
                clearInterval(element.timeId);
                if(fn){//If the user passes in the callback function fn(); //Call it directly,
                }
            }
            console.log("target:"+target+"current:"+current+"step:"+step);
        },10);
    }
 
</script>
</html>

css.css style:

@charset "UTF-8";
/*Initialize reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
 
.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: