图片请自行替换，此轮播图方法直接，不知道有没有哪位兄台英雄所见略同的。不过对于格式问题实在无力吐槽了。。。。废话不多话，上代码！！！
<!DOCTYPE html>
<html>
<head>
<title>banner</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 400px;
width: 70%;
}
#food{
width: 100%;
height: 100%;
}
#left{
position:absolute;
top: 48%;
opacity: 0.5;
}
#right{
position: absolute;
top: 48%;
left: 90%;
opacity: 0.5;
}
</style>
</head>
<body style="background: lightgray">
<!-- 轮播开始 -->
<div>
<img id="food" src="img/1.jpg">
<img id="left" src="img/left.jpg">
<img id="right" src="img/right.jpg">
</div>
<!-- 轮播结束 -->
</body>
<script>
var F = document.getElementById('food')
var L = document.getElementById('left')
var R = document.getElementById('right')
var i = 1;
function Banner(){
if(i==5)
{
i = 1;
}
else
{
i++;
}
F.setAttribute('src', 'img/'+i+'.jpg');
}
R.onclick = Banner;/*事件调用函数时不要加括号*/
L.onclick = function(){
if(i==1)
{
i = 5;
}
else
{
i--;
}
F.setAttribute('src', 'img/'+i+'.jpg');
}
/*页面加载时调用*/
window.onload=function()
{
setInterval("Banner()",6000);//每6秒轮播一次
}
</script>
</html>后期可以加上一些动画之类的！
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
