집 > 기사 > 웹 프론트엔드 > js를 사용하여 웹 페이지 이미지 캐러셀을 구현하는 방법

js를 사용하여 웹 페이지 이미지 캐러셀을 구현하는 방법

一个新手원래의: 2017-09-09 09:47:213795검색

그림 회전은 웹 페이지 표시에서 일반적으로 사용됩니다. 여기서는 그림 회전에 4개의 긴 그림이 사용됩니다. 다음은 코드입니다:

f7.html

<!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

.top_p{
	width: 100%;
	height: 130px;
	/*background: red;*/
	background-image: url(../image/Koala.jpg);
	text-align: center;
}

/*.top_p_h1{
	text-align: center;
}
*/
.second_p{
	width: 1366px;
	height: 260px;
	/*margin: 20px;  */
    overflow: hidden;
	/*background-image: url(../image/Desert.jpg);*/
	/*background: yellow;*/
	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: blue;*/
	background-image: url(../image/Jellyfish.jpg);
	float: left;
}

.down_p_right{
	width: 74%;
	height: 500px;
	/*background: green;*/
	background-image: url(../image/Hydrangeas.jpg);
	float: right;
}

abc.js

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JS의 얕은 복사와 깊은 복사란 무엇입니까?다음 기사：JS의 얕은 복사와 깊은 복사란 무엇입니까?