그림 회전은 웹 페이지 표시에서 일반적으로 사용됩니다. 여기서는 그림 회전에 4개의 긴 그림이 사용됩니다. 다음은 코드입니다:
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>
|
로그인 후 복사
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 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s 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;
}
|
로그인 후 복사
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" ;
}
|
로그인 후 복사
위 내용은 js를 사용하여 웹 페이지 이미지 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!