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

Web interview: The difference between MVC and MVVM and why Vue does not fully comply with MVVM

Table of contents Difference between MVC and MVVM...

How to add configuration options to Discuz! Forum

Discuz! Forum has many configuration options in th...

SQL insert into statement writing method explanation

Method 1: INSERT INTO t1(field1,field2) VALUE(v00...

Introduction to the process of building your own FTP and SFTP servers

FTP and SFTP are widely used as file transfer pro...

A complete list of common Linux system commands for beginners

Learning Linux commands is the biggest obstacle f...

Web page creation question: Image file path

This article is original by 123WORDPRESS.COM Ligh...

Vue echarts realizes dynamic display of bar chart

This article shares the specific code of vue echa...

MySQL 5.6.15 installation and configuration method graphic tutorial under Windows 8

MySQL is a database that I like very much. Today,...

Detailed explanation of the underlying principle of defineCustomElement added in vue3.2

Table of contents Web Components customElements O...

How to simplify Redux with Redux Toolkit

Table of contents Problems Redux Toolkit solves W...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...

Advantages and Problems of XHTML CSS Website Design

XHTML is the standard website design language cur...

How to use dd command in Linux without destroying the disk

Whether you're trying to salvage data from a ...

Detailed explanation of MySQL high availability architecture

Table of contents introduction MySQL High Availab...

Detailed description of HTML table border control

Only show the top border <table frame=above>...