javascript - CSS图片轮播显示问题
本文介绍了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>
<div class="wrapper">
<ul id="list">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<div class="toggle">
<span id="prev"><</span>
<span id="next">></span>
</div></div>
<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>
我想问一下，为什么页面上显示的是最后一张图片在最上面，而不是第一张！
解决方案
<!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>
<div id="imgDiv">
<img id="imgImg" src="img/1.png" />
</div>
<div class="toggle">
<span id="prev"><</span>
<span id="next">></span>
</div>
</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>
这篇关于javascript - CSS图片轮播显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
