您的位置：首页 > 其它
图片滑动轮换效果

2012-02-10 13:37 260 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iammrwoo</title>

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

<script type="text/javascript">

$(document).ready(function(){

var page = 1;
var i = 3; //每版放4个图片
//向后 按钮
$("span.next").click(function(){ //绑定click事件
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
//往前 按钮
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
})

</script>

<style type="text/css">
.v_show
{
height: 146px;
background: url(images/imgBox.gif) no-repeat;
margin-top: 10px;
position: relative;
}
.v_show .prev
{
display: block;
position: absolute;
left: 1px;
top: 45px;
width: 14px;
height: 47px;
cursor: pointer;
}
.v_show .next
{
display: block;
position: absolute;
right: 3px;
top: 45px;
width: 14px;
height: 47px;
cursor: pointer;
}
.v_content
{
position: relative;
width: 845px;
height: 130px;
margin: 2px auto;
overflow: hidden;
}
.v_content_list
{
position: absolute;
width: 2500px;
top: 0px;
left: 0px;
}
.v_content ul
{
float: left;
padding: 0;
margin: 0;
list-style: none;
}
.v_content ul li
{
float: left;
display: inline;
margin: 0 10px;
}
.v_content ul li a
{
display: block;
display: inline;
float: left;
margin: 25px 10px;
}
.v_content .imgtext
{
width: 135px;
margin-top: 20px;
float: left;
display: inline;
}
.v_content .imgtext h1
{
font-size: 12px;
padding: 5px 0;
margin: 0;
color: #336699;
}
.v_content .imgtext p
{
padding: 0;
margin: 0;
font-size: 12px;
line-height: 20px;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div class="v_show">
<span class="prev">
<img src="images/leftbutton.gif" /></span> <span class="next">
<img src="images/rightbutton.gif" /></span>
<div class="v_content">
<div class="v_content_list">
<ul>
<%for (int i = 0; i < picpaths.Count; i++)
{%>
<li style="float: left">
<img src="ad/<%=picpaths[i] %>" id="Img1" width="186" height="126" alt="图片名称" />
</li>
<%} %>
</ul>
</div>
</div>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航