如何使用html+css實(shí)現(xiàn)輪播圖效果

發(fā)布時(shí)間：2021-08-27 15:45:59 來(lái)源：億速云閱讀：346 作者：chen 欄目：web開(kāi)發(fā)

本篇內(nèi)容主要講解“如何使用html+css實(shí)現(xiàn)輪播圖效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何使用html+css實(shí)現(xiàn)輪播圖效果”吧!

推動(dòng)輪播實(shí)現(xiàn)效果圖如下

首先寫(xiě)Html部分，你可以理解這個(gè)div標(biāo)簽，如果你寫(xiě)CSS或者JS的時(shí)候可以用到這幾個(gè)div標(biāo)簽，<div id="container">就是一個(gè)ID為container的div，先不說(shuō)多，下面給大家代碼示例

div id="container">
<div id="screen">

id="screen" 這個(gè)可以給div標(biāo)簽?zāi)莻€(gè)塊狀設(shè)置屬性，比如寬、高、顏色、等等。<a href="#">href在是CSS代碼的一種意思是指定超鏈接目標(biāo)，<img> 標(biāo)簽的src屬性是必需的。它的值是圖像文件的URL，也就是引用該圖像的文件的的絕對(duì)路徑或相對(duì)路徑，用法示例

`a href="#"`用法

<a href="#" onclick="window.close()"></a>

分類(lèi)

內(nèi)部連接：<a href="#/URL">name</a>

錨記：<a name="object-name">name</a><a href="#object-name">name</a>

外部鏈接：<a href="URL">name</a>建立一個(gè)以name為表象的網(wǎng)址鏈接。

鏈接說(shuō)明文字：<a href="/" title="鏈接說(shuō)明">...</a>

img src=""用法

圖片和HTML文本在同一目錄下：例如index.html和img.jpg

<img src="img.jpg">

圖片和HTML不在同一目錄下：圖片img.jpg在文件夾images中，index.html和images文件夾在同一個(gè)目錄下

 <img src="images/img.jpg">

圖片img.jpg在文件夾images中，index.html在controller文件夾中，images和controller文件夾在同一個(gè)目錄下

 <img src="../images/img.jpg">

將圖像寬度和高度分別設(shè)置為 200 像素：<img> 標(biāo)簽的 height 和 width 屬性設(shè)置圖像的尺寸。

<img src="#" height="200" width="200" >

html完整代碼

<body>
<div id="container">
<div id="screen">
<a href="#"><img src="001.jpg" width="200" height="200" target="_blank"></a>
<a href="#"><img src="002.jpg" width="200" height="200" target="_blank"></a>
<a href="#"><img src="003.jpg" width="200" height="200" target="_blank"></a>
</div>
</body>

ok,寫(xiě)完html編輯代碼，接下來(lái)使用css寫(xiě)編輯

用內(nèi)外邊距均設(shè)置為0px，再來(lái)screen中a標(biāo)簽設(shè)置為【左浮動(dòng)】并且設(shè)置動(dòng)畫(huà)屬性，周期為1s并且無(wú)限循環(huán)。

*{
	margin: 0px;
	padding: 20px;
}
#screen a{
	animation: donghua 1s infinite;
	float: left;

代碼效果

如何使用html+css實(shí)現(xiàn)輪播圖效果

設(shè)置container寬度高度均為200px（與圖片寬度相同），并且將溢出部分隱藏起來(lái)。

在并排五張圖的直線(xiàn)上，以每張圖左下角為坐標(biāo)點(diǎn)，其橫坐標(biāo)分別為0px，200px，400px，600px，800px

@keyframes donghua{
	0%{transform: translate(0px)}
	18%{transform: translate(0px)}
	20%{transform: translate(-200px)}
	38%{transform: translate(-200px)}
	40%{transform: translate(-400px)}
	58%{transform: translate(-400px)}
	60%{transform: translate(-600px)}
	78%{transform: translate(-600px)}
	80%{transform: translate(-800px)}
	100%{transform: translate(-800px)}
}

效果代碼

如何使用html+css實(shí)現(xiàn)輪播圖效果

ok,完成css代碼

完整代碼

<html>
<head>
	<title></title>
<style type="text/css">
*{
	margin: 0px;
	padding: 20px;
}
#screen a{
	animation: donghua 1s infinite;
	float: left;
}

@keyframes donghua{
	0%{transform: translate(0px)}
	18%{transform: translate(0px)}
	20%{transform: translate(-200px)}
	38%{transform: translate(-200px)}
	40%{transform: translate(-400px)}
	58%{transform: translate(-400px)}
	60%{transform: translate(-600px)}
	78%{transform: translate(-600px)}
	80%{transform: translate(-800px)}
	100%{transform: translate(-800px)}
}
</style>
</head>
<body>
<div id="container">
<div id="screen">
<a href="#"><img src="001.jpg" width="200" height="200" target="_blank"></a>
<a href="#"><img src="002.jpg" width="200" height="200" target="_blank"></a>
<a href="#"><img src="003.jpg" width="200" height="200" target="_blank"></a>
</div>
</body>
</html>

到此，相信大家對(duì)“如何使用html+css實(shí)現(xiàn)輪播圖效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

如何使用html+css實(shí)現(xiàn)輪播圖效果

a href="#"用法

img src=""用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

`a href="#"`用法