jQuery由慢突然变快的幻灯片效果_图片代码_图片轮播_轮播_焦点图

今天分享一个有点延迟效果的焦点图轮播。

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 353 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 图片轮播难易程度：初级

HTML

<div id="js_banner" class="fx_banner">
    <ul id="js_banner_img" class="fx_banner_img clear">
        <li style="background:#cfd0ef">
            <div class="fx_banner_inner fx_grid_c1">
                <div class="child child0" data-z="1">
                    <img src="images/0.jpg" alt="misfit shine">
                </div>
                <div class="child" data-z="2" style="left:0;top:0;">
                    <img src="images/0_1.png" alt="">
                </div>
                <div class="child" data-z="3" style="left:495px;top:0;">
                    <img src="images/0_2.png" alt="">
                </div>
            </div>
            <a href="#" class="fx_banner_link">
                <span class="hide">
                    去购买
                </span>
            </a>
        </li>
        <li style="background:#fe5769">
            <div class="fx_banner_inner fx_grid_c1">
                <div class="child child0" data-z="1">
                    <img src="images/1.jpg" alt="latin">
                </div>
                <div class="child" data-z="2" style="left:0;top:0;">
                    <img src="images/1_1.png" alt="">
                </div>
                <div class="child" data-z="3" style="left:495px;top:0;">
                    <img src="images/1_2.png" alt="">
                </div>
            </div>
            <a href="#" class="fx_banner_link">
                <span class="hide">
                    去购买
                </span>
            </a>
        </li>
    </ul>
</div>

引入jQuery库、css和js

<link rel="stylesheet" href="css/index.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/tab.js"></script>

调用tab插件

$(function() {
    var $window = $(window),
    window_width = $window.width();
    $('#js_banner, #js_banner_img li').width(window_width);
    new $.Tab({
        target: $('#js_banner_img li'),
        effect: 'slide3d',
        animateTime: 1000,
        stay: 3500,
        autoPlay: true,
        merge: true,
        prevBtn: $('#js_banner_pre'),
        nextBtn: $('#js_banner_next')
    });
});