recherche

Maison >interface Web >js tutoriel >Comment utiliser js pour implémenter un carrousel d'images de pages Web

Comment utiliser js pour implémenter un carrousel d'images de pages Web

一个新手
一个新手original
2017-09-09 09:47:213803parcourir

La rotation des images est couramment utilisée dans l'affichage des pages Web. Ici, quatre longues images sont utilisées pour la rotation des images. Voici le code :

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";  /*轮放长度请看这里*/
    }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Qu'est-ce qu'une copie superficielle et profonde dans JSArticle suivant：Qu'est-ce qu'une copie superficielle et profonde dans JS

Articles Liés

Voir plus