swipe轮播插件零基础实用
此篇博客整理了常用的轮播效果,适用于所有开发人员
swipe是当下相对而言较好用的轮播插件,下面是博主整理的demo源代码,可直接上手(备注:需自己手动swipe所需的j和css)
此段代码总共是有三个详细效果,并且备注了初始化js对应的html,和使用swipe当中所需要用到的一些小的属性控制方法!
这里就不一一详解
博客园开通很久,也一直没时间好好经营自己的博客,第一篇博客,难免细节的地方,排列顺序方法,内容介绍肯定难免存在许些问题,博主承诺以后会记录的越来越优质
希望大家多多指教
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>公用效果</title> | |
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> | |
<script src="js/swiper.min.js"></script> | |
<style type="text/css"> | |
li{ | |
list-style: none; | |
} | |
/*分页器颜色样式控制*/ | |
.swiper-pagination-bullet{ | |
background-color: #8a6b78 !important; | |
opacity: 1 !important; | |
} | |
.swiper-pagination-bullet-active{ | |
background-color: #e7cccc !important; | |
} | |
/*前后按钮控制样式*/ | |
.boxleft{ | |
background: url(img/gift-left.png) no-repeat !important; | |
background-size: 100%; | |
outline: none; | |
} | |
.boxright{ | |
background: url(img/gift-right.png) no-repeat !important; | |
background-size: 100%; | |
outline: none; | |
} /*outline: none;属性可以去除点击出现边框*/ |
|
/*.*/ | |
/*鼠标移出隐藏按钮,移入显示按钮*/ | |
.swiper-container .hide{ | |
opacity:0; | |
} | |
.swiper-button-next,.swiper-button-prev{ | |
transition:opacity .5s; | |
} | |
/*.*/ | |
/*主图下滚动*/ | |
#box { | |
width:1200px; | |
margin: 0 auto; | |
} | |
#box .swiper-wrapper{ | |
margin-top:40px ; | |
padding-left: 12px; | |
} | |
#box ul>li { | |
display: inline-block; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
#box ul>li>img { | |
width: 170px; | |
height: 115px; | |
} | |
/*上下切换控制*/ | |
.smlbannertop{ | |
width: 400px; | |
} | |
.smlbannertop img { | |
width: 400px; | |
height: 305px; | |
} | |
.gallery-thumbs .swiper-slide { | |
height: 100%; | |
opacity: 0.8; | |
} | |
.gallery-thumbs .swiper-slide-thumb-active { | |
opacity: 1; | |
} | |
.smlbannerall{ | |
width: 1000px; | |
} | |
.smlbannerall img { | |
width: 176px; | |
height: 120px; | |
margin: 20px 0px 0 8px; | |
} | |
</style> | |
</head> | |
<body> | |
<!--top banner--> | |
<div class="swiper-container" id="bigbanner"> | |
<div class="swiper-wrapper"> | |
<div class="swiper-slide"><img src="img/banner01.jpg"></div> | |
<div class="swiper-slide"><img src="img/banner02.jpg"></div> | |
<div class="swiper-slide"><img src="img/banner03.jpg"></div> | |
</div> | |
<!--分页器--> | |
<div class="swiper-pagination bigpagination"></div> | |
<!--前进后退按钮--> | |
<div class="swiper-button-prev swiper-button-black bigleft"></div> | |
<div class="swiper-button-next swiper-button-black bigright"></div> | |
</div> | |
<!--主图下滚动--> | |
<div class="swiper-container" style="width: 1300px; margin: 0 auto;"> | |
<div class="swiper-container" id="box"> | |
<ul class="swiper-wrapper"> | |
<li class="swiper-slide"> | |
<img src="img/choose1.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/choose2.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/choose3.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/choose4.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/choose5.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/choose3.jpg" /> | |
</li> | |
</ul> | |
</div> | |
<div class="swiper-button-prev boxleft"></div> | |
<div class="swiper-button-next boxright"></div> | |
</div> | |
<!--切换效果--> | |
<div class="swiper-container gallery-top smlbannertop"> | |
<div class="swiper-wrapper"> | |
<div class="swiper-slide"> | |
<img src="img/comrecommend.jpg" /> | |
</div> | |
<div class="swiper-slide"> | |
<img src="img/comrecommend.jpg" /> | |
</div> | |
<div class="swiper-slide"> | |
<img src="img/comrecommend.jpg" /> | |
</div> | |
<div class="swiper-slide"> | |
<img src="img/comrecommend.jpg" /> | |
</div> | |
</div> | |
</div> | |
<div class="swiper-container gallery-thumbs smlbannerall"> | |
<ul class="swiper-wrapper"> | |
<li class="swiper-slide"> | |
<img src="img/comrecommend01.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/comrecommend02.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/comrecommend03.jpg" /> | |
</li> | |
<li class="swiper-slide"> | |
<img src="img/comrecommend04.jpg" /> | |
</li> | |
</ul> | |
</div> | |
<script> | |
//topbanner | |
var mySwiper = new Swiper('#bigbanner', { | |
direction: 'horizontal', | |
//是否无限轮播 | |
loop: true, | |
//切换时间 | |
autoplay: { | |
delay: 3000, | |
disableOnInteraction: true,//用户操作swiper之后,是否禁止autoplay。默认为true:停止。 | |
}, | |
//过渡时间 | |
speed: 1300, | |
// 如果需要分页器 | |
pagination: { | |
el: '.bigpagination', | |
clickable :true, | |
}, | |
// 如果需要前进后退按钮 | |
navigation: { | |
nextEl: '.bigright', | |
prevEl: '.bigleft', | |
}, | |
//切换效果 | |
effect:"fade" | |
}) | |
//鼠标移出隐藏按钮,移入显示按钮 | |
mySwiper.el.onmouseover=function(){ | |
mySwiper.navigation.$nextEl.removeClass('hide'); | |
mySwiper.navigation.$prevEl.removeClass('hide'); | |
} | |
mySwiper.el.onmouseout=function(){ | |
mySwiper.navigation.$nextEl.addClass('hide'); | |
mySwiper.navigation.$prevEl.addClass('hide'); | |
} | |
//主图下滚动box | |
var swiper = new Swiper('#box', { | |
//显示几个盒子 | |
slidesPerView: 6, | |
//盒子之间的间距 | |
spaceBetween: 0, | |
autoplayDisableOnInteraction:true, | |
loop: true, | |
autoplay: { | |
delay: 2000 | |
}, | |
speed: 800, | |
// 如果需要前进后退按钮 | |
navigation: { | |
nextEl: '.boxright', | |
prevEl: '.boxleft', | |
}, | |
}); | |
//切换效果 | |
var galleryThumbs = new Swiper('.smlbannerall', { | |
// 控制显示几个 | |
slidesPerView: 4, | |
loop: true, | |
loopedSlides: 5, //一般设置为本来slide的个数 | |
watchSlidesVisibility: true, | |
watchSlidesProgress: true, | |
}); | |
var galleryTop = new Swiper('.smlbannertop', { | |
spaceBetween: 10, | |
loop:true, | |
loopedSlides: 5, //一般设置为本来slide的个数 | |
thumbs: { | |
swiper: galleryThumbs, | |
}, | |
}); | |
</script> | |
</body> | |
</html> | |
此效果图一一贴出
swipe轮播插件零基础实用的更多相关文章
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- SuperSlide轮播插件滚动高度或宽度不对的问题解决
声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...
- jQuery轮播插件SuperSlide【2016-10-14】
[一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码 autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...
- 实现一个3D图片轮播插件 —— 更新版
前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
随机推荐
- send data to Flume client-sdk flume使用之httpSource
https://flume.apache.org/FlumeDeveloperGuide.html#client-sdk flume使用之httpSource - CSDN博客 https://blo ...
- cocos2d-js v3事件管理器
总概: 1.时间监听器(cc.EventListener)封装用户的事件处理逻辑. 2.事件管理器(cc.eventManager)管理用户注册的事件监听器. 3.事件对象(cc.Event)包含事件 ...
- FIL代币是什么?
自从比特币价格暴涨.区块链技术火了以后,出现了币圈,币圈中有各种各样的代币,本文就和大家介绍其中的FIL代币相关内容,希望能帮助大家一点一点的了解币圈. IPFS与Filecoin的关系 ...
- ActiveMQ的消息的(含附件)发送和接收使用
首先介绍一下ActiveMQ的版本:apache-activemq-5.10.2 启动MQ:activemq.bat 下面来编写MQ的发送类: 里面的发送ip和模式名称可以根据具体的实际情况填写. S ...
- Docker的远程访问
$docker : info (10.211.55是另一台服务器的地址) 频繁访问远程的docker服务器使用-H选项很麻烦,使用环境变量DOCKER_HOST, $export DOCKER_HOS ...
- Mac下文件编码转换
参见:http://bbs.feng.com/read-htm-tid-107633.html 使用: sudo find *.txt -exec sh -c "iconv -f GB180 ...
- [NOIP2011提高组day2]-3-观光公交
3.观光公交 (bus.cpp/c/pas) [问题描述] 风景迷人的小城 Y 市,拥有 n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光 ...
- POJ2492 A Bug's Life —— 种类并查集
题目链接:http://poj.org/problem?id=2492 A Bug's Life Time Limit: 10000MS Memory Limit: 65536K Total Su ...
- 关于redis的思考
集群版本的redis主从复制 也可以实现集群 但是不是很好 集群版redis主从复制版本集群 Spring Boot整合Redi事务 Spring Boot+Redis+Ehcache实现二级缓存 S ...
- 从ffmpeg filter里出来的数据直接送给avcodec_encode_audio2编码,写文件有错。
http://hi.baidu.com/mingyuejingque/item/78e71aff57ae9ec5a835a2e4 感谢mingyuejingque st = avformat_new_ ...