jquery.ccslider实现三维翻转过渡幻灯片效果代码-html代码-BFW代码库

jquery.ccslider实现三维翻转过渡幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery.ccslider实现三维翻转过渡幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ccslider.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
body{
    padding-top: 200px;
}
        #slider {
            margin: 0 auto;
            width: 1093px;
            height: 462px;
            background:;
        }

        #slider .control-links {
            bottom: 0;
            display: none;
        }

        #slider .control-links li.active {
            display: none;
        }

        #slider img {
            visibility: hidden;
        }
    </style>
</head>

<body>

    <!-- slider -->

    <div id="slider" class="ccslider">

        <div class="slider-innerWrapper">

            <img src="//repo.bfw.wiki/bfwrepo/image/610f3be0929c6.png" alt="" data-transition="{ effect :  cubeUp ,  slices : 3,  animSpeed : 1200,  delay : 100,  delayDir :  fromCentre ,  easing :  easeInOutBack ,  depthOffset : 300,  sliceGap : 30}">

            <img src="//repo.bfw.wiki/bfwrepo/image/610f3c0eb44d2.png" alt="" data-transition="{ effect :  cubeRight ,  slices : 1,  delay : 200}">

            <img src="//repo.bfw.wiki/bfwrepo/image/610f3be0929c6.png" alt="" data-transition="{ effect :  cubeDown ,  slices : 1,  animSpeed : 3000,  delay : 30,  easing :  easeInOutElastic ,  depthOffset : 200,  sliceGap : 20}">

            <img src="//repo.bfw.wiki/bfwrepo/image/610f3c0eb44d2.png" alt="" data-t.........完整代码请登录后点击上方下载按钮下载查看