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

jQuery响应式全屏幻灯片轮播

来源:http://www.erdangjiade.com/ 沐浴春风 2015-09-05 15:02浏览(1519)

分享一个常用的全屏滑动效果的广告幻灯片,你可以自定义动画时间、滑动延时时间、是否自动播放等。

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

jQuery响应式全屏幻灯片轮播
分类:图片代码 > 图片轮播 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

幻灯片html代码包括:#js_banner_img li幻灯片列表和左右按钮.fx_banner_pre,.fx_banner_next

<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="http://www.erdangjiade.com/js" 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="http://www.erdangjiade.com/js" class="fx_banner_link"><span class="hide">去购买</span></a>
        </li>
    </ul>
    <div class="fx_banner_common fx_grid_c1">
        <a ytag="30000" id="js_banner_pre" href="javascript:;" class="fx_banner_pre"></a>
        <a ytag="30010" id="js_banner_next" href="javascript:;" class="fx_banner_next"></a>
    </div>
</div>

引入焦点轮播插件tab.js和jquery库

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

jQuery

$(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')
    });
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/478.html
评论0
头像

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

1 2