首页 > 其他 > 详细

图片的轮播与选择上下页方法

时间:2017-10-28 11:57:07      阅读:262      评论:0      收藏:0      [点我收藏+]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#a{width: 520px;
height: 280px;
margin-left: 0px;
margin-top: 0px;
}
#b{width: 29px;
height: 52px;
float: left;
margin-left: 0px;
margin-top: 0px;
position: relative;
top: 162px;
left: 0px;
z-index: 2;
background: url(../img/shangyizhang.png) no-repeat;
cursor: pointer;}
#c{width: 29px;
height: 52px;
position: relative;
top: -117px;
left: 491px;
z-index: 2;
background: url(../img/xiayizhang.png) no-repeat;
cursor: pointer;}
#A{margin-left: 500px;}
.d{width: 15px;
height: 15px;
float: left;
margin-left: 5px;
margin-top: 0px;
border-radius: 50%;
background-color: black;
cursor: pointer;
}
#B{width: 100px;
height: 30px;
position: relative;
top: -40px;
left: 200px;}
</style>


<script>

function one (type){
document.getElementById("a").innerHTML =‘<img src="img/‘+type+‘">‘
}
var d = 5;
function two (type){
document.getElementById("a").innerHTML = ‘<img src="img/‘+d+‘.jpg">‘;
if(type==‘shang‘){
d--;
if(d==0){d=5;}
}else if(type == ‘xia‘){
d++;
if(d==6){d=1;}
}
}


window.onload = function(){
setInterval(
function(){
document.getElementById("a").innerHTML = ‘<img src="img/‘+d+‘.jpg">‘;
d++;
if(d==6){d=1;}
},
4000
)
}
</script>
</head>

<body>
<div id="A">
<button id="b" onClick="two(‘shang‘)"></button>
<div id="a"><img src="./img/1.jpg" onMouseOver="three()"></div>
<button id="c" onClick="two(‘xia‘)"></button>
<div id="B">
<div class="d" id="e" onClick="one(‘1.jpg‘)"></div>
<div class="d" id="f" onClick="one(‘2.jpg‘)"></div>
<div class="d" id="g" onClick="one(‘3.jpg‘)"></div>
<div class="d" id="h" onClick="one(‘4.jpg‘)"></div>
<div class="d" id="i" onClick="one(‘5.jpg‘)"></div>

</div>
</div>
</body>
</html>

图片的轮播与选择上下页方法

原文:http://www.cnblogs.com/wangyufei123/p/7746148.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!