图片切换

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.wrap {

position: relative;

width: 500px;

height: 284px;

overflow: hidden;

}

#middle {

overflow: hidden;

position: absolute;

width: 2000px;

top: 0;

left: 0px;

}

#middle>div {

width: 500px;

height: 284px;

float: left;

font-size: 50px;

background-color: #ccc;

text-align: center;

line-height: 200px;

}

</style>

<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#btn1").click(function(){

$("#middle").animate({

left:'0px'

},1000);

})

$("#btn2").click(function(){

$("#middle").animate({

left:'-500px'

},1000);

})

$("#btn3").click(function(){

$("#middle").animate({

left:'-1000px'

},1000);

})

$("#btn4").click(function(){

$("#middle").animate({

left:'-1500px'

},1000);

})

})

</script>

</head>


<body>

<div id="control">

<input type="button" name="" id="btn1" value="1" />

<input type="button" name="" id="btn2" value="2" />

<input type="button" name="" id="btn3" value="3" />

<input type="button" name="" id="btn4" value="4" />

</div>

<div class="wrap">

<div id="middle">

<div><img src="img/a11.jpg"/></div>

<div><img src="img/a41.jpg"/></div>

<div><img src="img/a5.jpg"/></div>

<div><img src="img/a7.jpg"/></div>

</div>

</div>

</body>


</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值