jQuery模拟QQ音乐3D轮播图切换

来源:https://www.sucaihuo.com/js/3018.html 2017-09-17 02:58浏览(1884) 收藏

一款jQuery模拟QQ音乐3D轮播图切换的特效,演示页面有两种效果:一种是带标题的的焦点图轮播,另一种是带焦点的3D轮播效果,两种效果的图片数量均可自由控制,另外,每种效果都可以通过鼠标悬停时显示的按钮来切换图片。
jQuery模拟QQ音乐3D轮播图切换
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2