javascript - CSS圖片輪播顯示問題
問題描述
<!DOCTYPE html><html lang='en'><head>
<meta charset='UTF-8'><title>Title</title><style type='text/css'> *{margin: 0;padding:0; } ul{list-style: none; } a{text-decoration: none; } .wrapper{width: 640px;height: 368px;margin: 50px auto;position: relative; } .wrapper li{position: absolute;left: 0;top:0; } .toggle{width: 640px;height: 368px; } .toggle span{width: 30px;height: 50px;background:#FF9629;position: absolute;text-align: center;line-height: 50px;color: #fff;font-size: 20px;cursor: pointer; /* display: none;*/ } #prev{top:159px; } #next{top:159px;right:0; }</style>
</head><body><p class='wrapper'>
<ul id='list'> <li><a href='http://www.aoyou183.cn/wenda/2997.html#'><img src='http://www.aoyou183.cn/wenda/img/1.jpg'></a></li> <li><a href='http://www.aoyou183.cn/wenda/2997.html#'><img src='http://www.aoyou183.cn/wenda/img/2.jpg'></a></li> <li><a href='http://www.aoyou183.cn/wenda/2997.html#'><img src='http://www.aoyou183.cn/wenda/img/3.jpg'></a></li> <li><a href='http://www.aoyou183.cn/wenda/2997.html#'><img src='http://www.aoyou183.cn/wenda/img/4.jpg'></a></li> <li><a href='http://www.aoyou183.cn/wenda/2997.html#'><img src='http://www.aoyou183.cn/wenda/img/5.jpg'></a></li></ul><p class='toggle'> <span id='prev'><</span> <span id='next'>></span></p>
</p><script type='text/javascript'>
var list = document.getElementById('list');var prev = document.getElementById('prev');var next = document.getElementById('next');function fn(ev) { var nowLeft =parseInt(list.style.left)+ev; list.style.left = nowLeft+'px';}prev.onclick = function () { fn(640);};next.onclick = function () { fn(-640);};
</script></body></html>
我想問一下，為什么頁面上顯示的是最后一張圖片在最上面，而不是第一張！
問題解答
回答1：<!DOCTYPE html><html>
<head> <meta charset='UTF-8'> <title>輪播圖</title> <style type='text/css'>* { margin: 0; padding: 0;}a { text-decoration: none;}.toggle { width: 640px; height: 368px;}.toggle span { width: 30px; height: 50px; background: #FF9629; position: absolute; text-align: center; line-height: 50px; color: #fff; font-size: 20px; cursor: pointer; /* display: none;*/}#prev { top: 159px;}#next { top: 159px; right: 0;} </style></head><body> <p id='imgp'><img src='http://www.aoyou183.cn/wenda/img/1.png' /> </p> <p class='toggle'><span id='prev'><</span><span id='next'>></span> </p></body><script type='text/javascript'> var arrayImg = [’img/1.png’ , ’img/2.png’ , ’img/3.png’ , ’img/4.png’ , ’img/5.png’]; var prev = document.getElementById('prev'); var next = document.getElementById('next'); var imgImg = document.getElementById('imgImg');var i = 0 ;prev.onclick = function(){i--;if(i < 0){ i = 4 ;}imgImg.setAttribute('src' , arrayImg[i]); }next.onclick = function(){i++;if(i > 4){ i = 0 ;}imgImg.setAttribute('src' , arrayImg[i]); } </script>
</html>
回答2：問題是出現(xiàn)在.wrapper li{position: absolute;left: 0;top:0;}，這一句上面，所有的li都被絕對(duì)定位了，并且位置都是left: 0, top: 0，后面的覆蓋在前面的上面，因此就是顯示的最后一個(gè)了；百度一下輪播圖的寫法，依你的寫法，是整不出來的
回答3：.wrapper li{position: absolute;<---left: 0;top:0; }回答4：
可以將圖片路徑保存在數(shù)組里面，使用js替換image的src值來實(shí)現(xiàn)點(diǎn)擊播放
回答5：你把所有的img元素都絕對(duì)定位了，當(dāng)然是最后一張?jiān)谧钌厦姘。惆阉麄兊母溉萜鹘^對(duì)定位
相關(guān)文章：
1. 我的html頁面一提交，網(wǎng)頁便顯示出了我的php代碼，求問是什么原因？2. django - 后臺(tái)返回的json數(shù)據(jù)經(jīng)過Base64加密，獲取時(shí)用python如何解密~！3. tp6表單令牌4. 我在centos容器里安裝docker，也就是在容器里安裝容器，報(bào)錯(cuò)了？5. node.js - node 客戶端socket一直報(bào)錯(cuò)Error: read ECONNRESET，用php的socket沒問題哈。。6. docker 17.03 怎么配置 registry mirror ?7. 老哥們求助啊8. node.js - nodejs中把熱request保存下來，使用JSON.stringify(req)報(bào)錯(cuò)，請(qǐng)問怎么解決？9. mysql分庫分表量級(jí)疑問10. javascript - canvas 可以實(shí)現(xiàn) PS 魔法橡皮擦的功能嗎？
網(wǎng)公網(wǎng)安備