The rotation of pictures is commonly used in web page display. Here, four long pictures are used for picture rotation. The following is the code:
f7.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >MyProject</ title >
< link rel = "stylesheet" href = "css/f7.css" >
< script src = "js/abc.js" ></ script >
</ head >
< body >
< p class = "top_p" >
< h1 class = "top_p_h1" >srh</ h1 >
</ p >
< p class = "second_p" >
< p id = "transImageBox" class = "trans_image_box" >
< img class = "trans_image" src = "image/1.png" />
< img class = "trans_image" src = "image/2.png" />
< img class = "trans_image" src = "image/3.png" />
< img class = "trans_image" src = "image/4.png" />
</ p >
</ p >
< p class = "down_p" >
< p class = "down_p_left" ></ p >
< p class = "down_p_right" ></ p >
</ p >
</ body >
</ html >
|
Copy after login
f7.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | .top_p{
width : 100% ;
height : 130px ;
background-image : url (../image/Koala.jpg);
text-align : center ;
}
.second_p{
width : 1366px ;
height : 260px ;
overflow : hidden ;
margin-top : 3px ;
}
.trans_image_box {
width : 5500px ;
height : 300px ;
-webkit-transition: all 1 s ease-in-out;
-moz-transition: all 1 s ease-in-out;
-o-transition: all 1 s ease-in-out;
transition: all 1 s ease-in-out;
}
.trans_image {
width : 1350px ;
height : 260px ;
float : left ;
margin-left : 5px ;
}
.down_p{
margin-top : 3px ;
}
.down_p_left{
width : 25% ;
height : 500px ;
background-image : url (../image/Jellyfish.jpg);
float : left ;
}
.down_p_right{
width : 74% ;
height : 500px ;
background-image : url (../image/Hydrangeas.jpg);
float : right ;
}
|
Copy after login
abc.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | var int=self.setInterval( "change()" ,2*1000);
var time=self.setInterval( "clock()" ,3*1000);
var i=1;
function clock(){
i=i+1;
if (i==5){
i=1;
}
}
function change(){
var a=document.getElementById( "transImageBox" );
a.style.marginLeft=(1-i)*1366+ "px" ;
}
|
Copy after login
The above is the detailed content of How to use js to implement web page image carousel. For more information, please follow other related articles on the PHP Chinese website!