您的位置：首页 > 其它

一个简单的banner

2016-07-04 23:40 253 查看

源码：

<html>

<head>

<title>一个简单banner</title>

<style>

*{margin:0;padding:0;}

.banner{height:200px;width:200px;height:120px;background-size:cover;margin:100px 0 0 200px;}

li{float:left;}

.right{margin-top:-180px;margin-left:352px;height:120px;width:50px;cursor:pointer;}

.left{margin-top:-180px;margin-left:0px;height:120px;width:50px;cursor:pointer;}

img{width:400px;height:300px;}

</style>

</head>

<body>

<div class="banner">

<img src="images/01.jpg" id="pc"/>

<img type="button" src="images/right.jpg" class="right" onclick="r_change()" />

<img src="images/left.jpg" class="left" onclick="l_change()" />

</div>

<script type="text/javascript">

var index = 1;

window.onload=function(){

var p = document.getElementById("pc");

p.src="images/01.jpg";

}

//左切换

function r_change(){

var p = document.getElementById("pc");

index++;

var x = index % 6;

if(x == 0){

index = 1;

}

else{

index = x;

}

p.src="images/0"+index+".jpg";

}

//右切换

function l_change(){

var p = document.getElementById("pc");

index--;

var x = index % 6;

if(x == 0){

index = 5;

}

else{

index = x;

}

p.src="images/0"+index+".jpg";

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 网页设计 banner

相关文章推荐

新的分享

章节导航