锋利的JQuery实例-视频展示效果 -

luckyjaky

浏览: 112145 次
性别:
来自: 深圳

最近访客更多访客>>

geosir

xiyuzhimo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

锋利的JQuery实例-视频展示效果

博客分类：

JavaScript\JQuery

jQuery JavaScript CSS XHTML HTML

<!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 runat="server">
    <title>视频展示效果实例</title>
    <link type="text/css" href="Styles/style4-2.css" rel="Stylesheet" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var page = 1;
            var i = 4; //每张放4张图片
            $("span.next").click(function () {
                var v_width = $("div.v_content").width();
                var len = $("div.v_content_list").find("li").length;//总的视频图片个数
                var page_count = Math.ceil(len / i);//只要不是整数，就往大的方向取最小的整数
                if (! $("div.v_content_list").is(":animated")) {//判断“视频内容区域”是否正在处于动画
                    if (page == page_count) {
                        $("div.v_content_list").animate({ left: "0px" }, "slow");
                        page = 1;
                    }
                    else {
                        //改变left值，达到每次切换一个页面
                        //left: '-=' + v_width  left每次递减v_width宽度
                        $("div.v_content_list").animate({ left: '-=' + v_width }, "slow");
                        page++;
                    }
                }
                //给指定的元素添加current样式，然后去掉span元素的同辈元素上的current样式
                $("div.highlight_tip").find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev" >上一页</span>
			<span class="next">下一页</span>
		</div>
		<em><a href="#">更多>></a></em>
	</div>
	<div class="v_content">
		<div  class="v_content_list">
			<ul>
				<li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="images/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="images/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
		     </ul>
		</div>
	</div>
</div>

    </form>
</body>
</html>

分享到：

复选框应用 | JQuery中动画效果的left值

2011-03-07 17:14
浏览 1599
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

锋利的JQuery实例-视频展示效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

锋利的JQuery实例-视频展示效果

评论

发表评论

相关推荐

分享33个优秀的 jQuery 教程

细说Cookie

百度和优酷的搜索体验改善，类似Google Instant搜索

jquery如何退出each循环的?

jquery获取当前鼠标的x、y位置

26个JQuery使用小技巧

JQuery UI Demo Darggable学习结果

锋利的JQuery实例-用JQuery打造个性网站-详细页面

锋利的JQuery实例-用JQuery打造个性网站-首页

cookie插件

去除左、右边空格

css与attr、trigger()与toggle()的区别

复选框应用

JQuery中动画效果的left值

JQuery事件对象的属性event

锋利的JQuery实例-图片提示效果

锋利的JQuery实例-超链接提示效果

锋利的JQuery学习笔记-认识JQuery

js乱码解决方法

【JQuery】鼠标经过表格行变色

最近访客更多访客>>