一款jQuery模拟QQ音乐3D轮播图切换的特效,演示页面有两种效果:一种是带标题的的焦点图轮播,另一种是带焦点的3D轮播效果,两种效果的图片数量均可自由控制,另外,每种效果都可以通过鼠标悬停时显示的按钮来切换图片。
页面的head部分,需引入页面所需的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="less/reset.css">
<link type="text/css" rel="stylesheet" href="less/slide.css">
<link type="text/css" rel="stylesheet" href="less/index.css">
页面的body部分,主要是在header标签里面放入两个ul无序列表来显示轮播图片内容,代码如下:
<header>
<div class="banner">
<div id="slide2d" class="slide-carousel slide-2d">
<ul class="item-list clearfix">
<li class="item0">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="image/banner1.jpg" alt="">
</a>
</div>
</li>
<!-- 省略部分演示代码 -->
</ul>
<!--indicators-->
<div class="indicator-list">
<a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
<a href="javascript:void(0);" data-slide-index="1"></a>
<a href="javascript:void(0);" data-slide-index="2"></a>
<a href="javascript:void(0);" data-slide-index="3"></a>
<a href="javascript:void(0);" data-slide-index="4"></a>
<a href="javascript:void(0);" data-slide-index="5"></a>
<a href="javascript:void(0);" data-slide-index="6"></a>
</div>
<!--controls-->
<div class="controls">
<a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
<a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
</div>
<!--desc-->
<div class="desc">
<a href=""><strong id="sliderDesc1"></strong></a>
</div>
</div>
<div id="slide3d" class="slide-carousel slide-3d">
<ul class="item-list clearfix">
<li class="item0">
<div class="item-content">
<a href="javascript:void(0);">
<img class="cover-img" src="image/banner1.jpg" alt="">
</a>
</div>
</li>
<!-- 省略部分演示代码 -->
</ul>
<!--indicators-->
<div class="indicator-list">
<a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
<a href="javascript:void(0);" data-slide-index="1"></a>
<a href="javascript:void(0);" data-slide-index="2"></a>
<a href="javascript:void(0);" data-slide-index="3"></a>
<a href="javascript:void(0);" data-slide-index="4"></a>
<a href="javascript:void(0);" data-slide-index="5"></a>
<a href="javascript:void(0);" data-slide-index="6"></a>
</div>
<!--controls-->
<div class="controls">
<a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
<a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
</div>
</div>
</div>
</header>
<main></main>
<footer></footer>
页面的底部,需引入jQuery库和轮播插件,对指定元素启用插件并设置好相应参数,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slide.min.js"></script>
<script type="text/javascript">
$(function(){
//3d
$('#slide3d').slideCarsousel({slideType:'3d',indicatorEvent:'mouseover'});
//2d
var sliderDescArr=[],i=0,len=10;
for(;i<len;i++){
sliderDescArr.push(new Array(10).join(''+i));
}
$('#sliderDesc').text(sliderDescArr[0]);
$('#slide2d').slideCarsousel({callbackFunc:function(index){
$('#sliderDesc1').text(sliderDescArr[index]);
}});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791