生活随笔
收集整理的這篇文章主要介紹了
轮播图练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用HTML和css實現輪播圖
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘寶輪播圖
</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb_promo {position: relative;width: 520px;height: 280px;margin: 100px auto;}.tb_promo img {width: 520px;height: 280px;}.prev {position: absolute;left: 0;top: 50%;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.slideshow_arrows {margin-top: -15px;width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.next {position: absolute;right: 0;top: 50%;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background: rgba(0, 0, 0, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px 3px;}.promo-nav .current {background-color: #ff5000;}</style>
</head>
<body><div class="tb_promo"><img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt=""><a href="#" class="slideshow_arrows prev">< </a><a href="#" class="slideshow_arrows next">> </a><ul class="promo-nav"><li class="current"></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>
缺點：沒有使用js來實現點擊左右按鈕來切換圖片，沒有使用js來實現切換圖片下面小圓圈動態變化。
總結
以上是生活随笔為你收集整理的轮播图练习的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
