头像

jQuery大小图联动轮播

来源:http://www.sucaihuo.com/js/3123 素材火管理员 2017-09-30 23:19浏览(967) 收藏

一款jQuery大小图联动轮播的特效,可以通过点击左右两次的按钮来切换大图和小图内容,无鼠标操作时则是自动轮播的效果,大图为全屏的背景图,小图为手机竖屏样式。
jQuery大小图联动轮播
分类:图片代码 > 图片轮播 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 18 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件、jQuery库和必要的JS文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>

页面的body部分,需设置好大小图轮播的容器,代码如下:

<div class="wrap">
    <div class="banner-box">
        <div class="mobile">
            <!-- banner-mobile -->
            <div class="mobile-content"></div>
            <i></i>
        </div>
        <!-- banner-bg -->
        <div class="swiper-content"></div>
    </div>
</div>

页面的底部,需启用插件并设置好轮播的图片内容,代码如下:

window.onload = function(){
    tools.swiperbanner('.swiper-content','.mobile-content',{
        bannerpic:["img/banner-01.png","img/banner-02.png","img/banner-03.png"],
        mobilepic:["img/banner-m01.png","img/banner-m02.png","img/banner-m03.png"]
    })
}
评论12
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 11楼
    03-07 13:41
    yu***赫赫
    可以借鉴一下,很实用,不错
  • 头像 10楼
    11-02 11:05
    .***.
    二级联动可以用高清的壁纸 效果更好
  • 头像 9楼
    10-15 01:35
    ..***..
    很实用,可以借鉴一下。
  • 头像 8楼
    10-12 09:53
    小***宝
    挺好的特效图
  • 头像 7楼
    10-10 09:27
    胡***胡
    感觉比较好看!!!
  • 头像 6楼
    10-07 22:54
    努***猪
    感觉比较好看,兼容性怎么样
  • 头像 5楼
    10-06 12:07
    sa***tt
    感觉比较好看,不知道兼容性怎么样。
  • 头像 4楼
    10-06 11:29
    11***42
    学习学习
  • 头像 3楼
    10-06 09:43
    非***道
    很好,实用
  • 头像 板凳
    10-05 14:17
    羊***羊
    很好看,很实用
1 2