jQuery大小图联动轮播

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

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

jQuery图片左右切换

图片左右切换,鼠标悬停,图片放大
  幻灯片和轮播图
 37483  348

jQuery轮播图插件slider

强大轮播图3D效果slider,功能强大兼容性好。
  幻灯片和轮播图
 51306  481

图片点击查看更多图片

仿京东,天猫商品详情 图片点击查看更多图片
  幻灯片和轮播图
 70896  313

jQuery门户网站带缩略图相册

jQuery带缩略图相册效,一个不错的相册效果,推荐大家使用哦!
  幻灯片和轮播图
 46997  445

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复