JavaScript – written round – cast page

HTML:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>By perfect</title>
		<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
		
	</head>
	<body>
		<div id="box">
			<img src="img/1.png" id="pic"/>
			<ul id="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			<div id="left" class="bt"><</div>
			<div id="right" class="bt">></div>
		</div>
		<script src="js/newlunbo.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
Copy the code

CSS:

* {padding: 0;
	margin: 0;
}
/* Overall interface style */
#box{
	width: 600px;
	height: 240px;
	margin: 0 auto;
	position: relative;
}
/* Switch buttons */
.bt{
	width: 40px;
	height: 60px;
	background-color: rgba(0.0.0.0.2);
	color: #FFFFFF;
	font-size: 30px;
	font-weight: 50px;
	Centered / * * /
	line-height: 60px;
	text-align: center;
	/* Absolute position */
	position: absolute;
	/* Hide */ without moving the mouse over it
	display: none;
}
#left{
	left: 0;
	top: 100px;
}
#right{
	right: 0;
	top: 100px;
}

/* < span style = "box-sizing: border-box
#list{
	position: absolute;
	bottom: 10px;
	left: 200px;
	/* cancels out the preceding point */
	list-style: none;
}
#list li{
	/* Float to a line */
	float: left;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #aaa;
	Centered / * * /
	text-align: center;
	line-height: 20px;
	margin-left: 10px;
}
Copy the code

JavaScript:

// The label to use
var jsbox = document.getElementById("box");
var jspic = document.getElementById("pic");
var left = document.getElementById("left");
var right = document.getElementById("right");
var jslistarr = document.getElementsByTagName("li");

// Set the first li to red
jslistarr[0].style.backgroundColor = "red"

// Start a timer to change the SRC property in PIC
var currentPage = 1
// Change the page method
function changePage(){
	if(currentPage == 6){
		currentPage = 1
	}else if(currentPage == 0){
		currentPage = 5
	}
	jspic.src = "img/"+currentPage+".png"
	// Empty the dot color
	for(var i = 0; i<jslistarr.length; i++){ jslistarr[i].style.backgroundColor ="#aaa"
	}
	jslistarr[currentPage - 1].style.backgroundColor = "red"
}
/ / timer
var timer = setInterval(startLoop,1000)
function startLoop(){
	currentPage++
	changePage()
	
}

// When the mouse enters box, the left and right buttons appear, and the timer rotation disappears
jsbox.addEventListener("mouseover",overfun,false)
/ / overfun method
function overfun(){
	// Stop the timer
	clearInterval(timer)
	// Display left and right buttons
	left.style.display="block";
	right.style.display = 'block';
}
// Mouse over box
jsbox.addEventListener("mouseout",outfun,false)
function outfun(){
	// Restart the timer
	timer = setInterval(startLoop,1000)
	// Hide the left and right buttons
	left.style.display="none";
	right.style.display = 'none';
}


// Mouse over the button
function deep(){
	this.style.backgroundColor = "Rgba (0,0,0,0.6)"	
}
left.addEventListener("mouseover",deep,false)
right.addEventListener("mouseover",deep,false)
// Mouse out button
function nodeep(){
	this.style.backgroundColor = "Rgba (0,0,0,0.2)"	
}
left.addEventListener("mouseout",nodeep,false)
right.addEventListener("mouseout",nodeep,false)
// Click the left and right buttons
left.addEventListener("click".function(){
	currentPage--
	changePage()
},false)
right.addEventListener("click".function(){
	currentPage++
	changePage()
},false)


// Enter the dot
for(var i = 0; i<jslistarr.length; i++){ jslistarr[i].addEventListener("mouseover".function(){
		currentPage = parseInt(this.innerHTML)
// console.log(currentPage)
		changePage()
	},false)}Copy the code

Running results:

When the mouse is not moved into the interface, the picture automatically rotates

When the mouse moves into the interface, the left and right buttons appear, and the automatic rotation is stopped

You can click the left and right buttons to rotate the picture, you can also move the mouse to the corresponding small dot to rotate the picture

 

 

 

Learn together and make progress together. If there are any mistakes, please comment