这是一个slider轮播切换与6种CSS3炫酷Loading预加载动画结合的特效,全屏自适应,兼容PC和移动端,每一个动画都可以单独使用。
开头引入CSS样式,jquery库和javascript插件底部再引入:
<link type="text/css" rel="stylesheet" href="css/style.css">
body部分将6中loading动画写在不同容器里面,代码如下:
<div class="container">
<ul id="arrows">
<li><a class="next" href="" title="">❯</a></li>
<li><a class="prev" href="" title="">❮</a></li>
</ul>
<ul id="spinners">
<li class="active" data-id="1">
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
<li data-id="2">
<div id="preloader_2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
<li data-id="3">
<div id="preloader_3"></div>
</li>
<li data-id="4">
<div id="preloader_4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
<li data-id="5">
<div id="preloader5"></div>
</li>
<li data-id="6">
<div id="preloader6">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
</ul>
<ul id="pagination">
<li><a data-id="1" class="pag_active" href="" title=""></a></li>
<li><a data-id="2" href="" title=""></a></li>
<li><a data-id="3" href="" title=""></a></li>
<li><a data-id="4" href="" title=""></a></li>
<li><a data-id="5" href="" title=""></a></li>
<li><a data-id="6" href="" title=""></a></li>
<span class="clear"></span>
</ul>
</div>
底部在引入jquery库javascript插件:
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791