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 ...
随机推荐
- matplotlib的学习1-为什么学他
1.是一个非常强大的python画图的一个工具 2.手中有很多的数据,但是不知道如何呈现 matplotlib->能画出 线图; 散点图; 等高线图; 条形图; 柱状图; 3D 图形, 甚至是图 ...
- 2020年“感恩杯”台州学院第十三届大学生程序设计竞赛D、H、I题解（后续补充）
D题:小z与他的袜子 描述 小z每天会穿一双新袜子. 开始他的衣柜里有n双袜子,袜子会从1-n进行编号.每天早上他都会从衣柜里拿编号最小的袜子来穿.每天晚上他会把今天穿的袜子扔进篮子里,如果篮子里有n ...
- linux重启后nginx服务无法启动
查看ngin.conf pid的内容 例如: pid /usr/local/nginx/logs/nginx.pid 根据以上配置内容来做,检查/usr/local/nginx/logs/是否存在,如 ...
- LightningChart -XY 2D图表特性
LightningChart -XY 2D图表--2D图表 系列类型:抽样数据(离散数据).点线.任意形式的点线.面积.高低.多边形.股票系列(蜡烛图).条.带.恒定线.强度网格和强度网强度系列能够渲 ...
- Python 中更优雅的日志记录方案
在 Python 中,一般情况下我们可能直接用自带的 logging 模块来记录日志,包括我之前的时候也是一样.在使用时我们需要配置一些 Handler.Formatter 来进行一些处理,比如把日志 ...
- winform关闭登录窗体打开主窗体的方法
实际使用 Program.cs代码 //声明一个线程 private static System.Threading.Mutex mutex; /// <summary> /// 应用程序 ...
- ConcurrentHashMap线程安全吗?
前言 没啥深入实践的理论系同学,在使用并发工具时,总是认为把HashMap改为ConcurrentHashMap,就完美解决并发了呀.或者使用写时复制的CopyOnWriteArrayList,性能更 ...
- CVE-2017-12149 JBOOS反序列化漏洞复现
一.漏洞描述 2017年8月30日,厂商Redhat发布了一个JBOSSAS 5.x 的反序列化远程代码执行漏洞通告.该漏洞位于JBoss的HttpInvoker组件中的 ReadOnlyAccess ...
- 论文翻译：2018_Deep Learning for Acoustic Echo Cancellation in Noisy and Double-Talk Scenarios
论文地址:深度学习用于噪音和双语场景下的回声消除 博客地址:https://www.cnblogs.com/LXP-Never/p/14210359.html 摘要 传统的声学回声消除(AEC)通过使 ...
- 容器编排系统K8s之访问控制--准入控制
前文我们聊到了k8s的访问控制第二关RBAC授权插件的相关话题,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14216634.html:今天我们来聊一下k8 ...