您的位置：首页 > 其它

图片轮播

2016-03-30 17:08 330 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

*{

margin:0px;

padding:0px;}

.box{

height:300px;

width:300px;

border:1px solid #333;

}

.left{

height:300px;

width:30px;

border:1px solid #333;

float:left;

line-height:300px;

text-align:center;

font-size:20px;

cursor:pointer;

position:absolute;

margin-left:0px;

}

.right{

height:300px;

width:30px;

border:1px solid #333;

float:left;

line-height:300px;

text-align:center;

font-size:20px;

cursor:pointer;

position:absolute;

margin-left:270px;}

.con{

height:300px;

width:300px;

border:1px solid #333;

float:left;

overflow:hidden;}

.imge{

width:1200px;

float:left;

height:300px;}

ul{list-style:none;}

.imge li img{

float:left;

width:300px;

height:300px;

font-size:0px;}

</style>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$(".right").click(function(){

$(".imge").stop().animate(200,function(){

$(".imge li").first().appendTo(".imge");

});

})

$(".left").click(function(){

$(".imge").stop().animate(200,function(){

$(".imge li").last().prependTo(".imge");})})})

</script>

<body>

<div class="box">

<div class="left"><strong><</strong></div>

<div class="con">

<ul class="imge">

<li><img src="10.23/4.jpg" /></li>

<li><img src="10.23/2.jpg" /></li>

<li><img src="10.23/3.jpg" /></li>

<li><img src="10.23/1.jpg" /></li>

</ul>

</div>

<div class="right"><strong>></strong></div>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航