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

本文通过效果展示,深入探讨了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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值