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:
|
<<: XHTML Getting Started Tutorial: Using the Frame Tag
>>: Docker intranet builds DNS and uses domain name access instead of ip:port operation
Recommend
Solution to forgetting the MYSQL database password under MAC
Quick solution for forgetting MYSQL database pass...
Button does not specify type as submit. Clicking the button does not jump to the specified URL.
Today, due to project requirements, js is needed t...
Network management and network isolation implementation of Docker containers
1. Docker network management 1. Docker container ...
What is COLLATE in MYSQL?
Preface Execute the show create table <tablena...
Nest.js hashing and encryption example detailed explanation
0x0 Introduction First of all, what is a hash alg...
Detailed explanation of vue-router 4 usage examples
Table of contents 1. Install and create an instan...
Detailed explanation of how to enable HSTS in nginx to force the browser to redirect to HTTPS access
In the previous article, we have implemented loca...
How to install PHP7 Redis extension on CentOS7
Introduction In the previous article, we installe...
3 Tips You Must Know When Learning JavaScript
Table of contents 1. The magical extension operat...
Method to detect whether ip and port are connectable
Windows cmd telnet format: telnet ip port case: t...
Vue implements two routing permission control methods
Table of contents Method 1: Routing meta informat...
Two solutions to the problem of MySQL in conditional statement only reading one piece of information
Today, my colleague encountered a very strange pr...
Docker installs mysql and solves the Chinese garbled problem
Table of contents 1. Pull the mysql image 2. Chec...
WeChat applet implements form verification
WeChat applet form validation, for your reference...
How to use http and WebSocket in CocosCreator
Table of contents 1. HttpGET 2. HTTP POST WebSock...