效果展示
完整代码
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>