jQuery大小图联动轮播

所属分类:媒体-幻灯片和轮播图

 40947  337  查看评论 (4)
分享到微信朋友圈
X
jQuery大小图联动轮播 ie兼容8

使用说明(注意:最少两张图,轮播)

1.需要引用tools.js文件 style.css文件(css文件可以根据个人需要更改)

2.文档结构

大图div 

<div class="swiper-content"></div>

小图div 

<div class="mobile-content"></div>

3.调用方法,传图

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"]
    })
}
相关插件-幻灯片和轮播图

完美左右切换

完美左右切换代码简单容易修改。
  幻灯片和轮播图
 44540  460

jQuery幻灯片切换

jQuery网站宽屏banner幻灯片切换
  幻灯片和轮播图
 30490  381

步步高vivo官网左右全屏动画焦点图

步步高vivo官网左右全屏动画焦点图,效果超级炫
  幻灯片和轮播图
 34552  372

html5全屏大图幻灯片切换特效按钮特效

html5全屏大图幻灯片切换特效按钮特效
  幻灯片和轮播图
 39927  372

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    安安 0
    2020/3/17 14:07:58
    怎么样才能点击圆点更换图片? 回复
    幸福~手掌 0
    2018/10/29 16:52:19
    能应用在移动端触摸滑动吗
        Hanna0
        2019/1/4 9:11:45
        还不能,移动端推荐使用swiper 功能强大~
    回复
    骑车去旅行 0
    2018/5/11 3:44:57
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复