仿今日头条滚动轮播图特效代码

仿今日头条滚动轮播图特效代码

今日头条PC端首页滚动轮播图效果,下载后可直接打开查看效果,使用的话,只需要调用对应js、css和html代码即可。

使用方法
在页面引入相关JS代码

1
2
3
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="ag7-main">
<div class="ag7-bannerslide">
<ul class="slidebox">
<li><a href="#"><img src="images/a1.png"></a></li>
<li><a href="#"><img src="images/a2.png"></a></li>
<li><a href="#"><img src="images/a3.png"></a></li>
<li><a href="#"><img src="images/a4.png"></a></li>
</ul>
<div class="slideinfo">
<div class="slidetitle">
<h2></h2>
</div>
<div class="slidelist">
<ul>
<li data-h1="Picture information 1">
动物
</li>
<li data-h1="Picture information 2">
风景
</li>
<li data-h1="Picture information 3">
户外
</li>
<li data-h1="Picture information 4">
汽车
</li>
</ul>
<span class="mask"></span>
</div>
</div>
</div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论