1. Making slide shows (refer to the fourth question of html experiment 8)
Functional description:
(1) Make slide animation with setTimeout. Automatically play slides after loading web pages. See slider.mp4 specifically.
(2) When mouseover picture, display left and right arrows and stop animation. When mouseout screen, hide left and right arrows and restart the animation.
(3) Each click on the left arrow will move an image.
(4) Each of the three points in the lower right corner corresponds to an image, and the corresponding points will change when the current image changes. Clicking on them displays the corresponding image.
Programming reference:
(1) Three IMGs are used for the picture and div is used for inclusion. Norap is added to the white-space style.
(2) The outer layer uses a div to set the width of an image and overflow to hidden.
(3) The two div ides above are relative.
(4) Each point and arrow is implemented by div and background map. Three points are encapsulated by a Div. The div and the div of two arrows are positioned absolutely.
(5) The switching of active points in three points is realized by adding or deleting class es.
* Methods used: querySelector(), querySelector All (), classList.add(), classList.remove()
Basic realization ideas:
With a time value t, every time a certain time t increases. When it comes to just switching into a complete picture, use a stay value to let it stay for a moment.
Three navigation points, which point should be red according to the selected picture (choose function), but the picture resources to be noted are as follows:
The navigation bar appears when an element of the image is triggered by a mouseover event, otherwise it is hidden:
The complete implementation code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
#slideMain {
top:130px;
left:440px;
padding: 0;
height:300px;
width:440px;
overflow:hidden;
position:relative;
}
.slides {
position:absolute;
height:300px;
width:2000px;
}
.slide {
height:300px;
width:440px;
float: left;
}
.Point,.Arrow {
position:absolute;
}
#point1 {
top:410px;
left:825px;
height:12px;
width:12px;
overflow:hidden;
position:absolute;
}
#point2 {
top:410px;
left:840px;
height:12px;
width:12px;
overflow:hidden;
position:absolute;
}
#point3 {
top:410px;
left:855px;
height:12px;
width:12px;
overflow:hidden;
position:absolute;
}
#arrow1 {
top:260px;
left:480px;
height:80px;
width:30px;
overflow:hidden;
position:absolute;
}
#arrow2 {
top:260px;
left:840px;
height:80px;
width:30px;
overflow:hidden;
position:absolute;
}
#arrow21{
top:-80px;
}
</style>
</head>
<body>
<div id="slideMain">
<div id="h" class="slides">
<img id="img1" class="slide" src="images/img1.jpg">
<img id="img2" class="slide" src="images/img2.jpg">
<img id="img3" class="slide" src="images/img3.jpg">
<img id="img1" class="slide" src="images/img1.jpg">
</div>
</div>
<div id="point1">
<img id="point11" class="Point" src="images/navigator.png">
</div>
<div id="point2">
<img id="point21" class="Point" src="images/navigator.png">
</div>
<div id="point3">
<img id="point31" class="Point" src="images/navigator.png">
</div>
<div id="arrow1">
<img id="arrow11" class="Arrow" src="images/arrows-30.png">
</div>
<div id="arrow2">
<img id="arrow21" class="Arrow" src="images/arrows-30.png">
</div>
</body>
<script>
var t=0;
var id;
var stay=0;
var judge=1;
var p1 = document.getElementById("point11");
var p2 = document.getElementById("point21");
var p3 = document.getElementById("point31");
var a1 = document.getElementById("arrow11");
var a2 = document.getElementById("arrow21");
a1.style.visibility="hidden";//The arrow appears when the mouse is placed on the picture.
a2.style.visibility="hidden";
function choose(pos){ //Display the image, this function maintenance point
if(pos==1){ //Notice that every point here is 12*36, and the bottom one is red.
p1.style.top=-24+ "px"; //Subtract 24 and show the red dot
p2.style.top=0+ "px";
p3.style.top=0+ "px";
}
else if(pos==2){
p1.style.top=0+ "px";
p2.style.top=-24+ "px";
p3.style.top=0+ "px";
}
else{
p1.style.top=0+ "px";
p2.style.top=0+ "px";
p3.style.top=-24+ "px";
}
}
function clock(){
if(t!=0&&t!=-440&&t!=-880&&t!=-1320){ //Each map is 440 PX wide
t=t-5;
}
else{
stay=stay+judge; //This picture stays for a certain period of time just when it's switched in.
}
if(stay==80){
t=t-5;
stay=0;
}
if(t==-1320){//When the calculation is full, count again
t=0;
}
if(t==0||(t<-880&&t>=-1320)){
choose(1);
}
else if(t<-0&&t>=-440){
choose(2);
}
else{
choose(3);
}
var h = document.getElementById("h");
h.style.left = t+ "px";//Slowly move to the left when switching pictures
id=setTimeout(clock,10); //Execute every 10 ms
}
clock();
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var img3=document.getElementById("img3");
var hander = function (event) { //All elements on the binding graph
switch (event.type) {
case "mouseover": //On the figure, the arrow appears.
judge=0;
document.getElementById("arrow11").style.visibility="visible";
document.getElementById("arrow21").style.visibility="visible";
break;
case "mouseout": //Leave the picture, arrow hidden
judge=1;
document.getElementById("arrow11").style.visibility="hidden";
document.getElementById("arrow21").style.visibility="hidden";
break;
}
};
a1.onclick=function (){ //Click on the left arrow
t=t+440;
if(t>0){
t=-880;
}
if(t==0||(t<-880&&t>=-1320)){
choose(1);
}
else if(t<-0&&t>=-440){
choose(2);
}
else{
choose(3);
}
};
a2.onclick=function (){
t=t-440;
if(t<-1320){
t=0;
}
if(t==0||(t<-880&&t>=-1320)){
choose(1);
}
else if(t<-0&&t>=-440){
choose(2);
}
else{
choose(3);
}
};
p1.onclick=function (){ //Click on the first dot to select the first picture
t=0;choose(1); };
p2.onclick=function (){//Click on the second dot to select the second picture
t=-440;choose(2); };
p3.onclick=function (){//Click on the third dot to select the third picture
t=-880;choose(3); };
a1.onmouseover=hander;
a1.onmouseout=hander;
a2.onmouseover=hander;
a2.onmouseout=hander;
p1.onmouseover=hander;
p1.onmouseout=hander;
p2.onmouseover=hander;
p2.onmouseout=hander;
p3.onmouseover=hander;
p3.onmouseout=hander;
img1.onmouseover=hander;
img1.onmouseout=hander;
img2.onmouseover=hander;
img2.onmouseout=hander;
img3.onmouseover=hander;
img3.onmouseout=hander;
</script>
</html>