level 1
王日火😘
楼主
<!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>
<script src="jquery-1.6.4.min.js"></script>
<script>
$(function(){
var page=1;
var i=4;
//向右移动
$(".next").click(function(){
var jq1=$(this).parents("box");//点击之后找到父元素；
var jq2=jq1.find("imge");
var jq3=jq1.find("content");
var jqwidth=jq3.width();
var len=jq2.find("li").length;
var page_count=Math.ceil(len/i);
if(!jq2.is(":animated"))
{
if(page==1){
jq2.animate({left:"0px"},"slow");
}
else{
jq2.animate({left:'-+'+jqwidth},"slow");
page++;
}
}
jq1.find("span").addClass("differ").siblings().removeClass("differ");
})
})
</script>
<style>
*{
margin:0;
padding:0;
}
body{
font-size:12px;}
ul{
list-style-type:none;
}
a{ text-decoration:none;}
a:hover{color:#000;
text-decoration:underline;}
img{ border:none;}
h1{
font-size:12px;}
#box{
width:595px;
border:1px solid #727272;
margin:0 auto;
}
#banner{
width:100%;
background-color:#ccc;
height:40px;
line-height:40px
}
#banner h1{
;
padding-left:10px;
float:left;
}
.circle{
float:left;
margin:15px 10px 10px 20px;
}
.circle span{
width:7px;
height:7px;
float:left;
margin-right:10px;
border-radius:100%;
-o-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
background-color:#fff;
text-indent:-9999px;
}
.circle span.differ{
background:#f00;
}
.arrow{
float:left;
margin:10px 5px 0 5px;
}
.arrow span{ background:url(3.gif) no-repeat;
width:31px;
height:22px;
float:left;
text-indent:-9999px;
}
.arrow .next{
background-position:-31px 0;
}
.more {
float:right;
width:100px;
height:20px;
line-height:20px;
}
.more em{
float:right;
margin:10px 5px 5px 12px;
}
#content{
width:592px;
height:160px;
overflow: hidden;
position:relative;
}
.imge{
float:left;
width:2500px;
position:absolute;
top:0;
left:0;
}
#content ul li{
float:left;
margin:15px 5px 10px 15px;
}
.imge h1{
color:#f00;
margin-top:10px;
}
.imge h1 a{
color:#f00;}
</style>
</head>
<body>
<div id="box">
<div id="banner"><h1>图片展示</h1>
<div class="circle"><span class="differ">1</span><span>2</span><span>3</span><span>4</span></div>
<div class="arrow">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="more">
<em><a href="#">>更多</a></em>
</div>
</div>
<div id="content">
<div class="imge">
<ul>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
2015年11月01日 02点11分
1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.6.4.min.js"></script>
<script>
$(function(){
var page=1;
var i=4;
//向右移动
$(".next").click(function(){
var jq1=$(this).parents("box");//点击之后找到父元素；
var jq2=jq1.find("imge");
var jq3=jq1.find("content");
var jqwidth=jq3.width();
var len=jq2.find("li").length;
var page_count=Math.ceil(len/i);
if(!jq2.is(":animated"))
{
if(page==1){
jq2.animate({left:"0px"},"slow");
}
else{
jq2.animate({left:'-+'+jqwidth},"slow");
page++;
}
}
jq1.find("span").addClass("differ").siblings().removeClass("differ");
})
})
</script>
<style>
*{
margin:0;
padding:0;
}
body{
font-size:12px;}
ul{
list-style-type:none;
}
a{ text-decoration:none;}
a:hover{color:#000;
text-decoration:underline;}
img{ border:none;}
h1{
font-size:12px;}
#box{
width:595px;
border:1px solid #727272;
margin:0 auto;
}
#banner{
width:100%;
background-color:#ccc;
height:40px;
line-height:40px
}
#banner h1{
;
padding-left:10px;
float:left;
}
.circle{
float:left;
margin:15px 10px 10px 20px;
}
.circle span{
width:7px;
height:7px;
float:left;
margin-right:10px;
border-radius:100%;
-o-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
background-color:#fff;
text-indent:-9999px;
}
.circle span.differ{
background:#f00;
}
.arrow{
float:left;
margin:10px 5px 0 5px;
}
.arrow span{ background:url(3.gif) no-repeat;
width:31px;
height:22px;
float:left;
text-indent:-9999px;
}
.arrow .next{
background-position:-31px 0;
}
.more {
float:right;
width:100px;
height:20px;
line-height:20px;
}
.more em{
float:right;
margin:10px 5px 5px 12px;
}
#content{
width:592px;
height:160px;
overflow: hidden;
position:relative;
}
.imge{
float:left;
width:2500px;
position:absolute;
top:0;
left:0;
}
#content ul li{
float:left;
margin:15px 5px 10px 15px;
}
.imge h1{
color:#f00;
margin-top:10px;
}
.imge h1 a{
color:#f00;}
</style>
</head>
<body>
<div id="box">
<div id="banner"><h1>图片展示</h1>
<div class="circle"><span class="differ">1</span><span>2</span><span>3</span><span>4</span></div>
<div class="arrow">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="more">
<em><a href="#">>更多</a></em>
</div>
</div>
<div id="content">
<div class="imge">
<ul>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
<li><a href="#"><img src="01.jpg"/><h1><a href="#">标题一</a></h1><span>时间：<em>2011-9-26</em></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>