非常优秀的swiper插件————幻灯片播放、图片轮播

http://www.idangero.us/

http://www.swiper.com.cn/　　Swiper中文网　　2015-10-15

SuperSlide2:　　（这是个PC用的滚屏插件，看着不错，还没研究。）　　　　2016-5-4

http://superslide2.com/ 　　superslide2

http://www.superslide2.com/param.html　　api

API: 　　

http://www.idangero.us/swiper/api/ 　　官网API

http://www.swiper.com.cn/api/index.html

var mySwiper = new Swiper('.swiper-container',{onSlideChangeEnd: function(){//当滑块滚动完毕后调用console.log(mySwiper.activeIndex);//当前滑块索引号
    },onSlideChangeStart: function(){//当滑块滚动开始调用console.log(mySwiper.activeIndex);//当前滑块索引号
    },
});

//mySwiper.onResize();//刷新swiper（不刷新会导致slide无法拖动的bug）
//mySwiper.slideTo(_index);//跳转到第几张图
//mySwiper.slideTo(_index,0);//跳转到第几张图（直接跳转，无滑动效果）

var mySwiper = new Swiper('.swiper-container',{//pagination: '.pagination',//loop:false,grabCursor: true,//paginationClickable: true,mousewheelControl:true,//鼠标滚轮//autoplay:2000,//mode: 'vertical',//纵向滚动（这个好像不好使了 2016-1-15）//direction: 'vertical',//纵向滚动（这个好用 2016-1-15）onInit: function(mySwiper){//Swiper初始化了//console.log("提示Swiper的当前索引 "+mySwiper.activeIndex);//提示Swiper的当前索引
    },
});
mySwiper.slideTo(2);//跳转到第三个滑块

标准轮播图（含图片懒加载）：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/Swiper/3.1.7/css/swiper.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/Swiper/3.1.7/js/swiper.min.js"></script>
<script type="text/javascript">
$(function(){//轮播图var mySwiper = new Swiper('.swiper-container',{pagination: '.xgt-pagination',    //导航小圆点
        paginationClickable: true,        //导航小圆点（可点击）
        nextButton: '.swiper-button-next',//下一张按钮
        prevButton: '.swiper-button-prev',//上一张按钮//direction: 'vertical',//Slides的滑动方向:垂直//autoplay : 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换//speed:300,//滑动速度，即slider自动滑动开始到结束的时间（单位ms）
loop: true,        //可循环
        grabCursor: true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
        mousewheelControl:true,//鼠标滚轮
        lazyLoading:true,//图片懒加载    http://www.swiper.com.cn/api/Images/2015/0308/213.html
        onLazyImageLoad: function(swiper, slide, image){//alert('延迟加载图片');//console.log(swiper);//Swiper实例//console.log(slide);//哪个slide里面的图片在加载//console.log(image);//哪个图片在加载
        }});
});
</script>
<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img class="swiper-lazy" data-src="data:images/_1.jpg"></div><div class="swiper-slide"><img class="swiper-lazy" data-src="data:images/_2.jpg"></div><div class="swiper-slide"><img class="swiper-lazy" data-src="data:images/_3.jpg"></div></div>
</div>

一、幻灯片播放、图片轮播————非常优秀的swiper插件，手机上支持手势滑动。还可以支持鼠标滚轮，移动和PC端两相宜。

（而且轮播的内容不仅仅可以放一张图片，可以放多张，或者图文混排。支持自定制。）有兴趣的去看官方demo

http://www.swiper.com.cn/api/　　API

初始化参数：

mousewheelControl:true,　　　//支持鼠标滚轮

mode: 'vertical',　　　　　　　//上下方向滚动

autoplay:2000,　　　　　　　　//2秒播放一张

pagination: '.pagination',　　　//导航（指定导航的类）

paginationClickable: true,　　 //导航（小圆点）可点击

loop:true,　　　　　　　　　　 //可循环（最后一张可衔接第一张）

grabCursor: true,　　　　　　 //滑块上加鼠标变小手的效果

lazyLoading:true,　　　　　　 //图片懒加载

freeMode: true,　　　　　　　//自由模式（设定此值后，每次可滚动在中间位置，不会每次只滚动一张图）

slidesPerView:4,　　　　　　　//一屏内显示4个滑块

preloadImages:false,　　　　 //强制预加载所有图片

翻页小圆点：

<div class="swiper-container tagjvhe-swiper">
<div class="swiper-wrapper cDGray f14"><div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag1.jpg" alt="效果图片"></a><p>现代1居室内装饰设计效果图片<span class="r"><i class="iconfont icon27"></i><em>1/8</em></span></p></div><div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag2.jpg" alt="效果图片"></a><p>现代2居室内装饰设计效果图片<span class="r"><i class="iconfont icon27"></i><em>2/8</em></span></p></div><div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag3.jpg" alt="效果图片"></a><p>现代3居室内装饰设计效果图片<span class="r"><i class="iconfont icon27"></i><em>3/8</em></span></p></div><div class="swiper-slide"><a href="/news/"><img class="swiper-lazy" data-src="data:images/_tag4.jpg" alt="效果图片"></a><p>唐朝<span class="r"><i class="iconfont icon27"></i><em>4/8</em></span></p></div>
</div>
</div>
<div class="tagjvhe-pagination"></div><style>
/*翻页小圆点*/
.tagjvhe-pagination {height:4px;}
.swiper-pagination-bullet {}
.swiper-pagination-bullet-active {background:#ff7200;}
</style>

var mySwiper = new Swiper('.swiper-container',{//pagination: '.pagination',//loop:true,grabCursor: true,paginationClickable: true,mousewheelControl:true,//鼠标滚轮autoplay:2000,mode: 'vertical',/*纵向滚动*/
})
$('.arrow-left').on('click', function(e){/*向前*/e.preventDefault();mySwiper.slidePrev();
})
$('.arrow-right').on('click', function(e){/*向后*/e.preventDefault();mySwiper.slideNext();
})

http://www.idangero.us/sliders/swiper/index.php   插件主页

http://www.idangero.us/sliders/swiper/api.php   插件API （强大的API。 可用 http://fanyi.baidu.com 输入网址翻译）

http://www.idangero.us/sliders/swiper/demos.php   插件DEMO

https://github.com/nolimits4web/Swiper/tree/master/src　　下载

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" /><!-- jquery库 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- <script src="js/zepto.min.js"></script> --><!-- 图片轮播 -->
<!-- <link href="plugin/idangerous.swiper.css" rel="stylesheet" type="text/css" />
<script src="plugin/idangerous.swiper-2.0.min.js"></script> --><link href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css" rel="stylesheet" type="text/css" />
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script></head>
<body>
<style type="text/css">
.main{margin:0 auto;}
</style><!-- 首页头条新闻(4张) --><!-- 图片轮播 --><div class="main" style="position:relative;"><div class="swiper-container" id="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="news_detail.html?id=51"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示一</a></div></div><div class="swiper-slide"><a href="news_detail.html?id=50"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示222222222222</a></div></div><div class="swiper-slide"><a href="news_detail.html?id=49"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示3333333333333</a></div></div><div class="swiper-slide"><a href="news_detail.html?id=48"><img src="http://www.tmtpost.com/wp-content/uploads/2014/06/140291396214.jpg" border="0"></a><div class="title-bg"></div><div class="title"><a href="news_detail.html?id=48">幻灯片演示4444444444444</a></div></div></div><div class="my-pager"></div></div></div><style>.swiper-wrapper{overflow:auto;zoom:1;}.swiper-slide{position:relative;}#swiper-container{width:680px;height:350px;}/*定义宽高*/#swiper-container img{width:100%;}#swiper-container a{color:#fff;text-decoration:none;}#swiper-container .title{position:absolute;bottom:0;width:100%;height:30px;line-height:30px;color:#FFF;font-size:20px;z-index:2;}#swiper-container .title-bg{position:absolute;bottom:0;width:100%;height:30px;background:#000;opacity:0.6;filter:alpha(opacity=60);z-index:1;}/*翻页小圆点*/.my-pager {position: absolute;right:2%;text-align: right;bottom:0;height:30px;line-height:30px;z-index:100;}.swiper-pagination-switch {display: inline-block;width: 8px;height: 8px;border-radius: 8px;background: #999;-webkit-box-shadow: 0px 1px 2px #555 inset;box-shadow: 0px 1px 2px #555 inset;margin: 0 3px;cursor: pointer;}.swiper-active-switch {background: #fff;}</style><script>$(function(){var mySwiper = new Swiper('.swiper-container',{pagination: '.my-pager',autoplay:3000,loop:true,grabCursor: true,paginationClickable: true})//var containerH=$("#swiper-container").find("img").first().height();//$("#swiper-container").height(containerH);
});</script><!-- 图片轮播,end --></body>
</html>

二、jQuery 3D圆盘旋转焦点图支持鼠标滚轮

http://www.html5tricks.com/jquery-3d-circle-image-slider.html 　　2014-10-9

三、jQuery水平滑动焦点图插件（这个不支持触屏拖动事件）

http://www.html5tricks.com/jquery-hor-image-slider.html 　　2014-10-10

superslide 这个还没试用 2015-4-1

posted on 2014-05-19 18:41 bjhhh 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/qq21270/p/3737456.html

非常优秀的swiper插件————幻灯片播放、图片轮播相关推荐

Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
jq插件处女座图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说上代码 (function($) { $.fn ...
jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
Bootstrap 图片轮播
@{Layout = null; }<!DOCTYPE html><html> <head><meta charset="utf-8"&g ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
android 自动播放幻灯片,Android自动播放Banner图片轮播效果
本文实例为大家分享了Android自动播放Banner图片轮播的具体代码,供大家参考,具体内容如下先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id=&qu ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

非常优秀的swiper插件————幻灯片播放、图片轮播

非常优秀的swiper插件————幻灯片播放、图片轮播相关推荐

最新文章

热门文章