一款jQuery大小图联动轮播的特效,可以通过点击左右两次的按钮来切换大图和小图内容,无鼠标操作时则是自动轮播的效果,大图为全屏的背景图,小图为手机竖屏样式。
页面的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"]
})
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791