视频展示效果
<!DOCTYPE html>
<html>
<head>
<title>视频展览效果</title>
<style type="text/css">
ul,ul li{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 { font-size:1em; }
.v_show{
width: 600px;
margin: 0 auto;
border: 1px solid #cfcfcf;
overflow:hidden;
}
.v_caption{
height:35px;
line-height: 35px;
background-color:#ededed;
background-color:-webkit-gradient(linear,left top,left bottom,from(#f1f1f1) to(#e5e5e5),color-stop(50%,#ededed));
}
.v_caption .cartoon{
float: left;
width: 84px;
margin: 0;
overflow:hidden;
background:url(img/vadioShow/btn_cartoon.gif) no-repeat;
text-indent:-9999px;
background-position: 0 -100px;
/*background-color: red;*/
}
.v_caption .high_tip {
display:inline;
float:left;
margin:14px 0 0 10px;
}
.v_caption .high_tip span {
display:inline;
float:left;
width:7px;
height:7px;
overflow:hidden;
margin:0 2px;
background:url(img/vadioShow/btn_cartoon.gif) no-repeat 0 -320px;
text-indent:-9999px;
}
.high_tip span.current {
background-position:0 -220px; }
.v_caption .change_btn{
float: left;
padding: 0 10px;
margin:7px 0 0 10px;
}
.change_btn span { display:block;
float:left; width:30px;
height:23px;
overflow:hidden;
background:url(img/vadioShow/btn_cartoon.gif) no-repeat;
text-indent:-9999px;
cursor:pointer;
}
.v_caption .change_btn .pre{
background-position:0 -400px;
}
.v_caption .change_btn .next{
background-position:-30px -400px;
}
/*content*/
.v_content{
width: 590px;
margin: 0 auto;
height: 200px;
position: relative;
overflow: hidden;
background:red;
}
.v_content_list{
width: 5000px;
position: absolute;
top:0px; left:0px;
}
.v_content_list li{
margin:10px;}
</style>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h3 class="cartoon" title="卡通动漫">卡通动漫</h3>
<div class="high_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="pre">上一页</span>
<span class="next">下一页</span>
</div>
</div><!-- 标题 -->
<div class="v_content">
<ul class="v_content_list">
<li>
<a href="#"><img src="img/vadioShow/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放</span><em>16,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放</span><em>16,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放</span><em>16,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放</span><em>16,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/02.jpg" alt="龙珠"></a><h4><a href="#">龙珠</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/02.jpg" alt="龙珠"></a><h4><a href="#">龙珠</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/02.jpg" alt="龙珠"></a><h4><a href="#">龙珠</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/02.jpg" alt="龙珠"></a><h4><a href="#">龙珠</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/03.jpg" alt="普鲁瓦"></a><h4><a href="#">普鲁瓦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/03.jpg" alt="普鲁瓦"></a><h4><a href="#">普鲁瓦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/03.jpg" alt="普鲁瓦"></a><h4><a href="#">普鲁瓦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/03.jpg" alt="普鲁瓦"></a><h4><a href="#">普鲁瓦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/04.jpg" alt="多啦衣梦"></a><h4><a href="#">多啦衣梦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/04.jpg" alt="多啦衣梦"></a><h4><a href="#">多啦衣梦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/04.jpg" alt="多啦衣梦"></a><h4><a href="#">多啦衣梦</a></h4><span>播放</span><em>17,0000</em>
</li>
<li>
<a href="#"><img src="img/vadioShow/04.jpg" alt="多啦衣梦"></a><h4><a href="#">多啦衣梦</a></h4><span>播放</span><em>17,0000</em>
</li>
</ul>
</div><!-- 内容 -->
</div>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
var page=1;
var i=4; //每一版放4张图
var $v_width=$("div.v_content").width();//获取一个版面的宽度
var v_len=$(".v_content_list li").length;//获取整个版面宽度
var page_count=Math.ceil(v_len/i);//获取共有几个版面，只有不是整数，就往大的方向取最小整数
var $v_show=$(".v_content_list");
$("span.next").click(function() {
var $parent=$(this).parents("div.v_show");
if(!$v_show.is(":animated")){//判断“视屏内容展示区域”是否正处于动画
if(page == page_count){//已经到最后一个版面，如果再往前，必须跳到第一个版面
$v_show.animate({left: "0px"}, 'fast');//改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({left: '-='+$v_width}, 'show');//通过改变left值，达到每次换一个版面
page++;
}
$parent.find('span').eq(page-1).addClass('current')
.siblings().removeClass('current');
}
});
$("span.pre").click(function() {
var $parent=$(this).parents("div.v_show");
if(!$v_show.is(":animated")){
if(page == 1){//已经到第一个版面，如果再往前，必须跳到最后一个版面
$v_show.animate({left: '-='+$v_width*(page_count-1)}, 'fast');
page = page_count;
}else{
$v_show.animate({left: '+='+$v_width}, 'show')
page--;
}
$parent.find('span').eq(page-1).addClass('current')
.siblings().removeClass('current');
}
});
})
</script>
</body>
</html>
注意：“v_content”必须设置position:relative,overflow:hidden,而后为他的子元素设置了position:absolute;
