JS implementation of carousel carousel case

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:
  • js carousel effect
  • JavaScript to implement carousel slideshow
  • js to achieve the effect of carousel carousel
  • JS implements carousel slideshow
  • js to achieve carousel effect
  • Native js to achieve carousel carousel effect
  • JS realizes the effect of carousel-style image rotation
  • Native JS to implement carousel-style image rotation plug-in
  • Native js to achieve carousel effect

<<:  XHTML Getting Started Tutorial: Using the Frame Tag

>>:  Docker intranet builds DNS and uses domain name access instead of ip:port operation

Recommend

How to use Vue3 mixin

Table of contents 1. How to use mixin? 2. Notes o...

Sharing experience on MySQL slave maintenance

Preface: MySQL master-slave architecture should b...

Vue3 encapsulates its own paging component

This article example shares the specific code of ...

HTML form tag tutorial (1):

Forms are a major external form for implementing ...

How to remove MySQL from Ubuntu and reinstall it

First delete mysql: sudo apt-get remove mysql-* T...

MYSQL database basics - Join operation principle

Join uses the Nested-Loop Join algorithm. There a...

How to start tomcat using jsvc (run as a normal user)

Introduction to jsvc In production, Tomcat should...

Steps to completely uninstall the docker image

1. docker ps -a view the running image process [r...

Analysis of the Linux input subsystem framework principle

Input subsystem framework The linux input subsyst...

How to use Typescript to encapsulate local storage

Table of contents Preface Local storage usage sce...

TypeScript installation and use and basic data types

The first step is to install TypeScript globally ...

Detailed explanation of mysql partition function and example analysis

First, what is database partitioning? I wrote an ...

Detailed explanation of HTML document types

Mine is: <!DOCTYPE html> Blog Garden: <!...