wowslider实现一个简洁幻灯片轮播图效果代码

代码语言:html

所属分类:幻灯片

代码描述:wowslider实现一个简洁幻灯片轮播图效果代码

代码标签: 简洁 幻灯片 轮播 效果

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

<!DOCTYPE html>
<html>
<head>
   
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/wowslider.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>
<body style="background-color:#d7d7d7;margin:auto;padding:100px;">

    <div id="wowslider-container1">
        <div class="ws_images">
            <ul>
                <li><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="1" title="1" id="wows1_0"></li>
                <li><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="2" title="2" id="wows1_1"></li>
                <li><a href=""><img src="data1/images/3.jpg" alt="bootstrap carousel" title="3" id="wows1_2"></a></li>
                <li><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="4" title="4" id="wows1_3"></li>
            </ul>
        </div>
        <div class="ws_bullets">
            <div>
                <a href="#" title="1"><span><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="1">1</span></a>
                <a href="#" title="2"><span><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="2">2</span></a>
                <a href="#" title="3"><span><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="3">3</span></a>
                <a href="#" title="4"><span><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" alt="4">4</span></a>
            </div>
        </div>
        <div class="ws_script" style="position:absolute;left:-99%"></div>
        <div class="ws_shadow"></div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/wowslider.js"></script>
    <script type="text/javascript">
        // -----------------------------------------------------------------------------------
        // http://wowslider.com/
        // JavaScript Wow Slider is a free software that helps you easily generate delicious
        // slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
        // Generated by WOW Slider 8.6
        //
        //***********************************************
        // Obfuscated by Javascript Obfuscator
        // http://javascript-source.com
        //***********************************************
        jQuery.extend(jQuery.easing, {
            easeInOutQuart: function(e, f, a, h, g) {
                if ((f /= g/2) < 1) {
                    return h/2*f*f*f*f+a
                }return -h/2*((f -= 2)*f*f*f-2)+a
            }}); function ws_turn(d, a, b) {
            var f = jQuery; var h = f(this); var c = f("li",
                b); var e = f(".ws_list",
                b); var g = f("<div>").addClass("ws_effect ws_turn").css({
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                    overflow: "hidden",
                    perspective: 500
                }).appendTo(b); thi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0