- 浏览: 50615 次
- 性别:
- 来自: 广州
文章分类
最新评论
(涉及到swiper.min.js,swiper.min.css,记得导入这两个文件。)
两种样式:
1)标题 + 页数。
2)标题。
第一种:标题+页数。
第二种:标题。
两种样式:
1)标题 + 页数。
2)标题。
第一种:标题+页数。
<div class="swiper-container" id="swiper-container"> <div class="swiper-wrapper" > <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/> <div class="title">第一张图</div> <div> <span class="swiper-title"></span> <span class="swiper-now"></span> </div> </div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第二张图</div> <div> <span class="swiper-title"></span> <span class="swiper-now"></span> </div> </div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第三张图</div> <div> <span class="swiper-title"></span> <span class="swiper-now"></span> </div> </div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第四张图</div> <div> <span class="swiper-title"></span> <span class="swiper-now"></span> </div> </div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="title">第五张图</div> <div> <span class="swiper-title"></span> <span class="swiper-now"></span> </div> </div> </div> <!-- <div class="swiper-pagination" id="swiper-pagination"></div> --> </div>
.swiper-slide { width: 100%; height: 200px; /* background: #999 url(../image/log.png) center center no-repeat; background-size: 200px auto;*/ } .swiper-slide img { width:100%; height: 100%; } .swiper-pagination { position: absolute; bottom: 10px; } .swiper-title{ line-height: 30px; position: absolute; text-align: right; bottom: 0px; height:30px; width:100%; background: rgba(0,0,0,.6); color: #fff; background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); background: -ms-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /* IE 10 */ background:-moz-linear-gradient(bottom,rgba(0,0,0,1), rgba(0,0,0,.1));/*火狐*/ background:-webkit-gradient(linear,bottom rgba(0,0,0,1), rgba(0,0,0,.1));/*谷歌*/ background: -webkit-gradient(linear,bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /*Opera 11.10+*/ /*z-index: 2;*/ } .title{ font-size: 13px; font-weight: 600; width: 80%; height: 30px; line-height: 36px; text-align: left; position: absolute; left: 15px; bottom: 2px; color: #fff; z-index: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swiper-now{ position: absolute; bottom: 6px; right: 16px; color: #4b9edc; }
var mySwiper = new Swiper('.swiper-container',{ pagination: '.swiper-pagination', loop:true, grabCursor: true, paginationClickable: true, autoplay: 3000 }); var now = document.querySelectorAll(".swiper-now"); var imgs = document.querySelectorAll(".swiper-title"); var count = imgs.length-2; for(var i=0;i<imgs.length;i++){ imgs[i].innerText = '/'+count; } now[0].innerText = '1'; for(var i=1;i<imgs.length-1;i++){ now[i].innerText = i; } now[imgs.length-1].innerText = '1';
第二种:标题。
<div class="swiper-container" id="swiper-container"> <div class="swiper-wrapper" > <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第一页</div></div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第二页</div></div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第三页</div></div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第四页</div></div> <div class="swiper-slide" data-hash="slide2"><img src="picA.jpg"/><div class="swiper-title">第五页</div></div> </div> <!-- <div class="swiper-pagination" id="swiper-pagination"></div> --> <div id="page"><span id="now">1</span><span id="all"></span></div> </div>
.swiper-slide { width: 100%; height: 200px; /* background: #999 url(../image/log.png) center center no-repeat; background-size: 200px auto;*/ } .swiper-slide img { width:100%; height: 100%; } .swiper-pagination { position: absolute; bottom: 20px; } .swiper-title{ position: absolute; bottom: 0px; height:20px; width:100%; background: rgba(0,0,0,.6); color: #fff; text-align: center; background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); background: -ms-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /* IE 10 */ background:-moz-linear-gradient(bottom,rgba(0,0,0,1), rgba(0,0,0,.1));/*火狐*/ background:-webkit-gradient(linear,bottom rgba(0,0,0,1), rgba(0,0,0,.1));/*谷歌*/ background: -webkit-gradient(linear,bottom, rgba(0,0,0,1), rgba(0,0,0,.1))); /* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1)); /*Opera 11.10+*/ /*z-index: 2;*/ } #page{ position: absolute; right: 20px; bottom: 0; background: red; } #page span{ display: block;color: #fff;float: left; } #page #now{ color: blue; }
var mySwiper = new Swiper('.swiper-container',{ pagination: '.swiper-pagination', loop:true, grabCursor: true, paginationClickable: true, autoplay: 1500 }); var img=document.getElementsByTagName("img").length-2; var all=document.getElementById("all"); all.innerHTML="/ "+img;
发表评论
-
菜单栏和内容
2017-03-10 09:35 471常见的菜单栏+内容界面。欢迎指点。 效果图: 可以戳这里 ... -
javascript 实现购物车页面
2017-02-06 18:46 1630跟商城有关系的网站,难免会有购物车的结账界面。 我用javas ... -
得到两数相除的百分数
2016-12-20 15:42 727原理: Math.ceil() //向上取整 Mat ... -
比较全的屏幕信息
2016-11-07 14:13 385比较全的屏幕信息。 function getInfo ... -
选项卡
2016-11-07 13:47 619欢迎指点! 效果图: 有两种办法实现: 原理一:多个ht ... -
javascript写的轮播图
2016-11-07 12:15 465欢迎指点! 先放上效果图: 鼠标移入界面后: 图片有 ... -
原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass
2016-10-13 17:56 1064介绍: 1、hasClass:判断DOM元素是否存在类。 2 ... -
阻止事件冒泡
2016-09-18 15:55 457JavaScript停止冒泡和阻止浏览器默认行为 事件兼容 ... -
实时监听输入框值变化
2016-09-13 10:35 3010(1)使用 jQuery 的话,同时绑定 oninput 和 ... -
js/jQuery实现类似百度搜索功能
2016-09-12 17:00 1111html代码: <!DOCTYPE html> ... -
左侧菜单栏右侧内容(改进,有js效果)
2016-09-09 10:25 4445(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章 ... -
js生成一周内的日期+周几
2016-09-08 10:41 1278(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果 ... -
定义类或对象
2016-09-07 15:17 410学习总结: 工厂方式 ...
相关推荐
可拖动对比图片 切换 网页特效
支持PC拖动的轮播图,本插件依赖于jquery,请先引入jquery。
一个可以在Unity进行图片轮播的demo,只需要给一个texture 2d的图片数组就可以直接用,有多种切换特效
TwentyTwenty 是一款可以通过拖动滑块来切换图片的jQuery图片切换插件,TwentyTwenty图片切换插件构思新颖,使用它就像是剧场拉幕的效果一样。
带小圆点的一个网页轮播特效框架,支持鼠标拖动图片切换,采用了jquery插件实现的效果,同时还调用了一个外部插件idangerous.swiper.min.js,从整体上看,这个网页焦点图像是缩略图模式,点击小圆点后或鼠标拖动图片...
弹性拖动交互切换特效是一款鼠标拖动图片甩出去即可看到效果。
该资源是HTML的三个实例,轮播图片、放大镜效果、面板拖动,里面附有完整的代码和图片资源,需要学习参考的可以下载。
实现了多张图片缩放拖动滑动切换图片,放大图片拖动边缘回缩
支持根据服务端返回的数据动态设置广告条的总页数 ...支持图片切换动画,目前支持10种切换动画,具体可看demo 支持设置图片切换速度 支持设置数字指示器 支持Glide/Fresco等主流图片加载框架加载图片
这是一款由jquery实现的带图片对比功能的图片轮播图,当每一张图片动画切换完毕后,会出现分隔条,拖动分隔条可进行当前图片左右两部分的对比,为本款焦点图添加了新颖的功能,不过感觉实际用途不大。若需要图片对比...
Dojo Zoomer 不但带有图片切换的效果,而且还具备强大的拖动放大功能,鼠标在大缩略图上拖动,右侧会显示出拖动区域的大图片,下侧的缩略图可供用户更换不同的图片,可以说本效果比较综合,用到了两个官方的JS封装库...
博客中发现有作者写的仿360的代码,觉得其中图片滑动的效果很有意思,特提取其中的代码。并加上类似mac的画面移动的动画效果。
触控拖动转轮;支持循环轮播;支持两端透明掩码;支持两端大小缩放;效果图及原理图请参见: https://blog.csdn.net/sdhexu/article/details/123247910
支持拖动的图片列表切换插件-owl-carousel
Jquery全屏滑块拖动横向图片滚动是一款支持鼠标滚动滚动切换的jquery特效。
jquery ui幻灯片插件制作带进度条自动轮播的图片切换,鼠标点击缩略图片,大图片类似滤镜百叶窗图片切换效果。支持鼠标拖动的图片切换。
仿百度外卖 水纹轮播图 在拖动的时候 出现水纹 停止拖动 水纹慢慢消失~
jQuery带滑块拖动图片相册切换特效源码.zip
很不错的apple图片切换效果脚本效果