jQuery中的事件和动画-视频展示效果

最新推荐文章于 2019-03-25 13:55:33 发布

原创最新推荐文章于 2019-03-25 13:55:33 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件 #动画

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文通过效果展示，深入探讨了jQuery中的事件处理和动画应用。虽然CSS样式未详述，但鼓励读者自行探究以加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

完整代码

css样式此处没有写，大家可以下去自己详细研究。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>视频提示效果</title>
	<script src="../jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var page=1;  //第一个版面
		var i=4;  //每个版面的宽度
		//给向右的箭头元素绑定click()事件
		$("span.next").click(function(){
			//找到相应元素所在位置
			var $parent=$(this).parents("div.v_show"); //根据当前点击的元素获取其父元素
			var $v_show=$paent.find("div.v_content_list");  //找到视频内容展示区域
			var $v_content=$v_show.find("div.v_content");  //找到视频所在区域的外围div
			//获取每个版面的宽度，判断是哪个版面
			var v_width=$v_content.lenght();
			var len=$v_show.find("li").lenght;   //总的视频数目
			var page_count=Math.ceil(len/i);     //判断有几个版面，不是整数时向上取整
			if (!$v_show.is(animate)) {
				if (page==page_count) {
					$("v_show").animate({left:'0px'},"slow");  //已经是最后一个版面
					page=1;
				}else{

					$("v_show").animate({left:'-='+v_width},"slow");  //任意版面，
					page++;
				}
			//蓝色圆点的移动
			$paent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");  //给指定的span添加样式，同时span的同级元素去掉该样式
			}
			//向左按钮
			if (!$v_show.is(animate)) {
				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--;
				}
			
		});
	})

	</script>
</head>
<body>

<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="#" style="float: right;">更多</a></em>
	</div>
	<!--视频变换区域-->
	<div class="v_content">
		<div class="v_content_list">
			<ul>
				<li><a href="#"><img src="../images/5.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28.276</em></span></li>
				<li><a href="#"><img src="../images/5.jpg"  alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28.276</em></span></li>
				<li><a href="#"><img src="../images/5.jpg"  alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28.276</em></span></li>
				<li><a href="#"><img src="../images/5.jpg"  alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28.276</em></span></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>