jQ实现图片无缝轮播
在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用swiper来制作，但总会有哪个几个个例需要我自己来写功能，这里制作了一个jq用来实现图片无缝轮播的dome，分享给大家ヽ(￣▽￣)ﾉ。
dome下载点击这里
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播dome</title>
<style type="text/css">
.slide-container {
max-width: 1060px;
margin: auto;
overflow: hidden;
max-height: 1060px;
}
.slide-container li{
float: left;
}
.slide-container img{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="slide-container" view-count="2">
<ul>
<li>
<img src="data:image/1.jpg" alt=""/>
</li>
<li>
<img src="data:image/2.jpg" alt=""/>
</li>
<li>
<img src="data:image/3.jpg" alt=""/>
</li>
<li>
<img src="data:image/4.jpg" alt=""/>
</li>
<li>
<img src="data:image/5.jpg" alt=""/>
</li>
<li>
<img src="data:image/6.jpg" alt=""/>
</li>
</ul>
</div>
<script src="jq.js"></script>
</body>
<script>
let orgLen, canMove, curLi, curLen,
slider = null,
interval = null,
curImgIndex = 0; function initSlider() {
let orgLiArray = document.querySelectorAll('.slide-container li'); orgLen = orgLiArray.length;
canMove = true;
slider = $('.slide-container'); addLi();
setStyle(); //添加li
function addLi() {
for (let i = 0; i < orgLen; i++) {
let preLi = orgLiArray[orgLen - i - 1].cloneNode(true);
let apLi = orgLiArray[i].cloneNode(true);
document.querySelector('.slide-container ul').prepend(preLi);
document.querySelector('.slide-container ul').append(apLi);
}
} function setStyle() {
curLi = slider.find('li');
curLen = curLi.length; curLi.css({
'width': 'calc(' + 100 / curLen + '% - 10px)', //动态设置li的宽度
'margin': '0 6px'
}); //根据实际li个数与ul中用户能够看到的个数比例设置ul宽度
slider.find('ul').css({
'width': curLen / slider.attr('view-count') * 100 + '%',
}); //获取到设置了width之后的li宽度
//通过margin-left 与margin-right 为负数 使中间的原始li集合在slide-container显示
let width = document.defaultView.getComputedStyle(curLi[0]).width.match(/\d*\W\d/g); width = (parseFloat(width) + 20) * orgLen;
slider.find('ul').css({
'margin-left': '-' + width + 'px',
'margin-right': '-' + width + 'px',
});
}
} /**
* 移动函数
* 每次移动后移除过渡效果
* 当前第一个图片索引值的绝对值大于原始图片数量则恢复为原始状态
* @param imgIndex
*/
function move(imgIndex) {
canMove = false; //滚轮滚动中不能再次滚动
clearInterval(interval); //清除定时器
slider.find('ul').css({
'transition': 'all 0.5s linear'
}); setTimeout(function () { //移动
slider.find('ul').css({
'transform': 'translateX( ' + 100 / curLen * -imgIndex + '% )',
});
setTimeout(function () { //移动完成后清除过渡效果
slider.find('ul').css({
'transition': '',
});
setTimeout(function () {
if (Math.abs(imgIndex) >= orgLen) { //到达边界回到初始状态
curImgIndex = 0;
slider.find('ul').css({
'transform': 'translateX(0)'
});
}
canMove = true;
startInterval();
}, 20);
}, 500);
}, 20);
} function startInterval() {
interval = setInterval(function () { //开始轮播
curImgIndex++;
move(curImgIndex);
},2000);
} initSlider();
startInterval(); //统一处理滚轮滚动事件
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) { //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
delta = event.wheelDelta / 120;
if (window.opera) //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
delta = -delta;
} else if (event.detail) { //FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail / 3;
}
if (delta) {
handle(delta); //阻止事件冒泡和屏幕向下滚动
event.preventDefault() && event.stopPropagation();
} } //上下滚动时的具体处理函数
function handle(delta) {
//向上滚动
if (delta < 0 && canMove) {
curImgIndex++;
move(curImgIndex);
} else if (delta > 0 && canMove) { //向下滚动
curImgIndex--;
move(curImgIndex);
}
} if (window.addEventListener) //FF,火狐浏览器会识别该方法
slider.get(0).addEventListener('DOMMouseScroll', wheel, false);
slider.get(0).onmousewheel = wheel; //W3C
</script>
</html>
jQ实现图片无缝轮播的更多相关文章
- js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- jQuery图片无缝轮播插件；
图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- jq写无缝轮播
今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)
这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...
- iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...
随机推荐
- Python将word文档批量转PDF
前面有一篇<Python批量创建word文档(2)- 加图片和表格>的文章,利用这篇文章创建的word文档来批量转PDF文档.代码: 1 ''' 2 #python批量将word文档转换成 ...
- 简单介绍下各种 JavaScript 解析器
作者:沧海 各种js解析器是前端工程化的基石,可以说如果没有它,很多工程化都无法正常执行,我们每天用到的babel.webpack.eslint.TypeScript背后都需要一套对应的js解析器,今 ...
- 登录&单点登录介绍
COOKIE & SESSION & TOKEN 主要用来跟踪会话,识别用户所用.cookie 是客户端,session 是服务端的. 因为 http 是无状态协议,每一次的访问都不知 ...
- Ubuntu安装 Sublime Text 及常用插件推荐
之前一直在用 Code Blocks 这个IDE工具,可用着还是感觉不怎么好,于是在网上找到了一篇文章,上面介绍了不少IDE,我找到了Sublime Text 感觉挺不错的. 帖子地址: http:/ ...
- MongoDB用户权限操作语法及示例
1.创建用户 1.1.语法格式: 1.1.1.格式及例子 >db.createUser( { user: "<name>", pwd: "<cle ...
- 如何在 Linux 系统查询机器最近重启时间
如何在 Linux 系统查询机器最近重启时间 在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到 ...
- Apache本机不同端口多站点配置：httpd-vhosts.conf（转载）
环境:Apache2.2.9,Resin-3.1.6,Win Server 2003 1.解压Resin至任意目录,我的是D:; 2. 安装Apache,具体操作下一步.下一步即可,其中要配置的地方是 ...
- LeetCode145 二叉树的后序遍历
给定一个二叉树,返回它的 后序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [3,2,1] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? /** * Defin ...
- Flutter 应用入门：路由管理
路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewContro ...
- LeetCode876 链表的中间结点
给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3,4,5] 输出:此列表中的结点 3 (序列化形式:[3,4 ...