純HTML和CSS實(shí)現(xiàn)JD輪播圖效果
發(fā)布時(shí)間：2018-06-01 14:46:42 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純HTML和CSS實(shí)現(xiàn)JD輪播圖效果,需要的朋友可以參考下
使用了純HTML和CSS實(shí)現(xiàn)了JD的輪播圖，沒有加動態(tài)效果，主要是使用了定位的知識。
，如圖為兩個側(cè)邊箭頭圖片。
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>LunBo</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.lunbo{
margin: 40px auto;
height: 470px;
width: 590px;
position: relative;
}
.left,.right{
position: absolute;
top: 50%;
margin-top: -18px;
width: 24px;
height: 36px;
}
.left{
left: 0;
}
.right{
right: 0;
}
.lunbo ul{
height: 18px;
width: 151px;
background: rgba(255,255,255,.3);
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -76px;
border-radius: 10px;
}
.lunbo li{
height: 14px;
width: 14px;
border-radius: 50%;
background-color: #fff;
float: left;
margin: 2px;
}
.lunbo .current{
background-color: #f40;
}
</style>
</head>
<body>
<div class="lunbo">
<img src="images/lunbo.jpg" alt="">
<div class="left"><img src="images/left.png" alt=""></div>
<!-- 也可以使用鏈接然后使用backgrounf -->
<div class="right"><img src="images/right.png" alt=""></div>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
實(shí)現(xiàn)了如下效果
總結(jié)
以上所述是小編給大家介紹的純HTML和CSS實(shí)現(xiàn)JD輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊，主要運(yùn)用了perspective和tranlateY這兩個知識點(diǎn)，有需要的可以了解一下。2017-01-03
html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果
這篇文章主要介紹了html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-06
HTML+CSS+JS實(shí)現(xiàn)堆疊輪播效果的示例代碼
這篇文章主要介紹了HTML+CSS+JS實(shí)現(xiàn)堆疊輪播效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-08- 這篇文章主要介紹了HTML5輪播圖全代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-22
HTML+CSS實(shí)現(xiàn)全景輪播的示例代碼
本文主要介紹了HTML+CSS實(shí)現(xiàn)全景輪播的示例代碼，實(shí)現(xiàn)了一個簡單的網(wǎng)頁布局，其中包含了五個不同的盒子，每個盒子都有一個不同的背景圖片，并且它們之間有一些間距，下面就2024-02-02
