最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

tabslet制作世界杯时间轴幻灯片

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-20 03:09浏览(1580)

今天我们用选项卡插件 Tabslet.js来制作一个幻灯片时间轴效果,并且可以通过左右按钮控制切换图片。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

tabslet制作世界杯时间轴幻灯片
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源 下载积分: 30 积分

tab菜单按钮

<ul class="tabNav"> 
    <li class="first"><a href="#tab-1"> 
            <strong><em>1</em><em>乌拉圭</em>世界杯</strong> 
            <b></b><i></i> 
            <span class="year">1930</span> 
        </a></li> 
    <li><a href="#tab-2"> 
            <strong><em>2</em><em>意大利</em>世界杯</strong> 
            <b></b><i></i> 
            <span class="year">1934</span> 
        </a></li> 
    <li> 
    ...... 
</ul>

tabPane面板内容

<div class="tabPane" id="tab-1"> 
    <div class="info"> 
        <h3>基本信息</h3> 
        <p>1930年恰逢乌拉圭独立100周年,第1届世界杯也决定在当时的足球第一强国乌拉圭举行。由于前往南美洲参赛费用高昂,不少欧洲国家都拒绝参加第1届的世界杯,只有4支欧洲球队参加。最终东道主乌拉圭在决赛中4-2战胜阿根廷捧得冠军奖杯,“独臂将军”卡斯特罗锁定胜局,乌拉圭成为历史上第一个世界杯冠军。本届比赛的最佳球员和最佳射手则是阿根廷球星斯塔比莱,他在世界杯上一共打进8球。</p> 
    </div> 
    <div class="img"> 
        <ul> 
            <li class="odd"><a href=""> 
                    <h4>冠军</h4> 
                    <img src="img/1.jpg" alt=""> 
                    <div class="txtOut"> 
                        <div class="txt"> 
                            <h5>乌拉圭</h5> 
                            <p>1930年恰逢乌拉圭独立100周年,第1届世界杯也决定在当时的足球第一强国乌拉圭举行。由于前往南美洲参赛费用高昂,不少欧洲国家都拒绝参加第1届的世界杯,只有4支欧洲球队参加。最终东道主乌拉圭在决赛中4-2战胜阿根廷捧得冠军奖杯。</p> 
                        </div> 
                    </div> 
                </a></li> 
            <li class="even"><a href=""> 
                    <h4>精彩瞬间</h4> 
                    <img src="img/2.png" alt=""> 
                    <div class="txtOut"> 
                        <div class="txt"> 
                            <h5>“独臂将军”</h5> 
                            <p>“独臂将军”卡斯特罗在决赛中为乌拉圭锁定胜局,乌拉圭成为历史上第一个世界杯冠军</p> 
                        </div> 
                    </div> 
                </a></li> 
            <li class="odd"><a href=""> 
                    <h4>世界杯之星</h4> 
                    <img src="img/3.jpg" alt=""> 
                    <div class="txtOut"> 
                        <div class="txt"> 
                            <h5>斯塔比莱</h5> 
                            <p>本届比赛的最佳球员和最佳射手则是阿根廷球星斯塔比莱,他在世界杯上一共打进8球。</p> 
                        </div> 
                    </div> 
                </a></li> 
....... 
</ul>

引入jquery.js和jquery.tabslet.min.js

<script type="text/javascript" src="jquery.js"></script>  
<script src="js/jquery.tabslet.min.js"></script>

调用tabslet.js插件

$(function() { 
    $('.tabs').tabslet({ 
        animation: true, 
        controls: { 
            prev: '.prev'
            next: '.next' 
        } 
    }); 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/228.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    06-10 17:50
    kksoft
    非常好!!!!!!!!!!!!!!
  • 头像 沙发
    10-27 09:50
    qq562140910
    独臂将军”卡斯特罗在决赛中为乌拉圭锁定胜局
1 2