English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This article shares html5Specific code for the Carousel, for reference, the content is as follows
1.Carousel layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*remove default styles*/
*{
margin: 0;
padding: 0;
}
/*set div*/
#outer{
width: 520px;
height: 333px;
/*center the setting*/
margin: 50px auto;
/*
* Set background color
*/
background-color: greenyellow;
/*Set top and bottom inner margins*/
padding: 10px 0;
/*Enable relative positioning for the parent element*/
position: relative;
/*Hide overflow content*/
overflow: hidden;
}
/*Set ul*/
#imgList{
/*Remove list items*/
list-style: none;
/*Set the width of ul*/
width: 2600px;
/*Enable absolute positioning*/
position: absolute;
/*
* By modifying the left value of ul, you can switch images
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*Set li*/
li{
/*Set element float*/
float: left;
/*Set margin*/
margin: 0 10px;
}
/*Set navigation buttons*/
#nav{
/*Enable absolute positioning*/
position: absolute;
/*Position*/
bottom: 20px;
/*
* #outer width 520px
*
* #nav width 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*Set a float*/
float: left;
/*Set width and height*/
width: 15px;
height: 15px;
/*Set background color*/
background-color: red;
/*Set margin*/
margin: 0 5px;
/*Set transparency*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<!--
Create a div as a container
-->
<div id="outer">
<!--Create a ul to save images-->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<!--Create a div to place navigation buttons-->
<div id="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>
</div>
</body>
</html>
2.Carousel logic:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*remove default styles*/
*{
margin: 0;
padding: 0;
}
/*set div*/
#outer{
width: 520px;
height: 333px;
/*center the setting*/
margin: 50px auto;
/*
* Set background color
*/
background-color: greenyellow;
/*Set top and bottom inner margins*/
padding: 10px 0;
/*Enable relative positioning for the parent element*/
position: relative;
/*Hide overflow content*/
overflow: hidden;
}
/*Set ul*/
#imgList{
/*Remove list items*/
list-style: none;
/*Set the width of ul*/
width: 2600px;
/*Enable absolute positioning*/
position: absolute;
/*
* By modifying the left value of ul, you can switch images
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*Set li*/
li{
/*Set element float*/
float: left;
/*Set margin*/
margin: 0 10px;
}
/*Set navigation buttons*/
#nav{
/*Enable absolute positioning*/
position: absolute;
/*Position*/
bottom: 20px;
/*
* #outer width 520px
*
* #nav width 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*Set a float*/
float: left;
/*Set width and height*/
width: 15px;
height: 15px;
/*Set background color*/
background-color: red;
/*Set margin*/
margin: 0 5px;
/*Set transparency*/
opacity: 0.5;
filter: alpha(opacity=50);
}
#nav a:hover{
background-color: black;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
//Get the ul with id 'imgList'
var imgList = document.getElementById("imgList");
//Get all image tags
var imgs = document.getElementsByTagName("img");
//Set the width of ul
imgList.style.width = 520 * imgs.length + "px";
//Align the navigation buttons to the center
//Get the div with id 'outer'
var outer = document.getElementById("outer");
//Get the div with id 'nav'
var nav = document.getElementById("nav");
nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";
//Create a variable to save the index of the currently displayed image
var index = 0;
//Get all hyperlinks
var links = document.getElementsByTagName("a");
//Set the corresponding hyperlink to be in the selected state
links[index].style.backgroundColor = "black";
//Turn on automatic image switching
autoChange();
/*
* Click the hyperlink to switch to the corresponding image
* Click the first hyperlink to switch to the first image
* Click the second hyperlink to switch to the second image
*/
//Bind a click response function to all hyperlinks
for(var i=0 ; i<links.length ; i++{
//Add an attribute to the hyperlink
links[i].num = i;
links[i].onclick = function(){
//When switching images, it needs to be turned off to avoid the influence of automatic switching
clearInterval(autoTimer);
//Get the index of the current clicked hyperlink
//Update the current image index
index = this.num;
//Switch to the corresponding image
/*
* Switching to the corresponding image is to modify the left property value of imgList
* 0 0*-520
* 1 1*-520
* 4 4*-520
*/
//imgList.style.left = -520*index + "px";
//Set the transition effect
move(imgList , "left" , -520*index , 20 , function(){
//After the image switching is complete, turn on the automatic switching
autoChange();
});
setA();
};
}
//Define a variable to save the timer for automatically switching images
var autoTimer;
/*
* Define a function specifically used to automatically switch images
*/
function autoChange(){
//Start a timer to handle the image switching
autoTimer = setInterval(function(){
//Increment the index
index++;
//Determine whether the index value is valid
index = index % imgs.length;
//Switch images
move(imgList , "left" , -520*index , 20 , function(){
//The animation is complete, switch the navigation points
setA();
});
,3000);
}
/*
* The function is specifically used to set the selected state of hyperlinks
*/
function setA(){
/*
* Because the last image and the first image are the same, when the displayed image is the last one, the first hyperlink should change color
*/
if(index >= imgs.length - 1{
index = 0;
//Switch to the last image instantly and then switch to the first image
imgList.style.left = 0;
}
/*Traverse hyperlinks*/
for(var i=0 ; i<links.length ; i++{
//Set the background color of all hyperlinks to red
links[i].style.backgroundColor = "";
}
//Set the current selected hyperlink to black
links[index].style.backgroundColor = "black";
}
};
</script>
</head>
<body>
<!--
Create a div as a container
-->
<div id="outer">
<!--Create a ul to save images-->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
<!--Create a div to place navigation buttons-->
<div id="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>
</div>
</body>
</html>
External js code:
/*
* Define a move() function to execute some simple animation effects
* Parameters:
* obj: the object to be animated
* attr: the attribute to be modified during the animation execution
* target: the target position of the animation execution
* speed: the speed of the animation execution
* callback: the callback function, which will be executed after the animation is completed
*/
function move(obj, attr, target, speed, callback) {
//close the previous timer
/*
* Generally, the timer identifier will be saved as an attribute of the executing animation object, ensuring that only the current object can access the timer
*/
clearInterval(obj.timer);
//determine whether to move left or right
//0 --> 8move right if 00
//if the starting position is less than the target position, move right with a positive speed
//800 --move left if > 0
//if the starting position is greater than the target position, move left with a negative speed
//get the starting position of the element
var current = parseInt(getStyle(obj, attr));
if (current > target) {
//if the starting position is greater than the target position, move left with a negative speed
speed = -speed;
}
//start a timer to control box1move
obj.timer = setInterval(function() {
//Get box1The current left value of
var oldValue = parseInt(getStyle(obj, attr));
//Calculate the new value through the old value
var newValue = oldValue + speed;
//Determine if newValue is greater than800
/*
* If from 0 to 800, execute animation, the value will become larger
* If from800 to 0 animation, the value will become smaller
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//Modify the box1Modify the left value of the box to the new value
obj.style[attr] = newValue + "px";
//When box1Move to800px position, stop moving
if(newValue == target) {
clearInterval(obj.timer);
//Call the callback function
callback && callback();
}
, 30);
}
/*
* Used to obtain the current style of any element
* Parameters:
* obj The element to obtain the style
* name The name of the style to be obtained
*
* When reading the style of an element, if the element has not set the style,
* Then Firefox, Chrome, and other browsers will automatically calculate the style values of elements
* For IE browsers, sometimes they do not automatically calculate but return the default value, such as width returning auto
*
*/
function getStyle(obj, name) {
//Determine if the browser contains the getComputedStyle method
if(window.getComputedStyle) {
//Supports normal browsers
return getComputedStyle(obj, null)[name];
}
//Only supports IE
return obj.currentStyle[name];
}
}
/*
* Define a function specifically used to add class to elements
* Parameters:
* obj The object to which the class attribute is to be added
* cn The attribute value of the class to be added
*/
function addClass(obj, cn) {
//If the element has the class, do not add it; add it only if it does not have it
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* Create a function to check if an element contains a specified class
* If it exists, return true. Otherwise return false.
*/
function hasClass(obj, cn) {}}
//Create a regular expression
var reg = new RegExp("\\b" + cn + "\\b"
//Return the check result
return reg.test(obj.className);
}
/*
* Method to remove class values from the specified element
*/
function removeClass(obj, cn) {
//To delete a class, replace this class with an empty string
//Create a regular expression
var reg = new RegExp("\\b" + cn + "\\b", "g";
//Determine if obj contains this class
if(reg.test(obj.className)) {
//Replace the content with an empty string
obj.className = obj.className.replace(reg, "");
}
}
/*
* Method to toggle the element's class
* Delete if the element contains the class
* Add if the element does not contain the class
*
*/
function toggleClass(obj, cn) {
//Check if obj contains cn
if(hasClass(obj, cn)) {
//Delete if the class exists
removeClass(obj, cn);
}
//Add if the class does not exist
addClass(obj, cn);
}
}
Note:Find the pictures yourself
That's all for this article. Hope it helps with your learning and that you will support the Naya Tutorial more.
Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please find the email address by replacing # with @ when reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.