原生JS实现淘宝无缝轮播
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
width:520px;
height:280px;
margin:100px auto;
position:relative;
}
.screen{
width:520px;
height:280px;
overflow:hidden;
position:relative;
}
.buttons{
position: absolute;
top: 110px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #FFF;
text-decoration: none;
font-size: 35px;
font-weight: bolder;
background: rgba(0,0,0,.3);
display: none;
}
.buttons:hover{
background: rgba(0,0,0,.8);
}
#prev{
left: 0;
}
#next{
right: 0;
}
.all:hover .buttons{
display: block;
}
.screen li{
width:520px;
height:280px;
overflow:hidden;
float:left;
}
.screen ul{
position:absolute;
left:0;
top:0px;
width:3120px;
}
.all ol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
.all ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer;
}
.all ol li.current{ background:yellow;}
</style>
</head>
<body>
<div class="all" id='all'>
<div class="screen">
<ul id="ul">
<li>
<img src="https://img.alicdn.com/tfs/TB1SK.nkqagSKJjy0FgXXcRqFXa-520-280.jpg_q90_.webp"/>
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1UCYOpoQIL1JjSZFhSuuDZFXa.jpg" width="520px" height="280px" />
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1qk6qXrb85uJjSZFmSuwgsFXa.jpg" width="520px" height="280px" />
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1Rl8QSXXXXXcnXVXXSutbFXXX.jpg" width="520px" height="280px" />
</li>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508563743567&di=9e677d63f836d18a6642641a604b6e67&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F78%2F42%2F42b1OOOPIC3b.jpg" width="520" height="280" alt="" />
</li>
<li>
<img src="https://img.alicdn.com/tfs/TB1SK.nkqagSKJjy0FgXXcRqFXa-520-280.jpg_q90_.webp"/>
</li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<a href="javascript: void(0)" class="buttons" id="prev"><</a>
<a href="javascript: void(0)" class="buttons" id="next">></a>
</div>
<script>
//原理： 定时器定义一个变量，如果满足条件style.left = 0,速调回，做到无缝效果
//注意一下num = key = this.index;必须更新一下数值否则会有bug
//先封装个运动函数。（运动函数百度一大堆）
function animate(obj,target) {
clearInterval(obj.timer);
var speed = obj.offsetLeft > target ? -15 : 15;
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft; //用于判断清除定时器
obj.style.left = obj.offsetLeft + speed + 'px';
//这句话要放在下面否则会有bug
if(Math.abs(result) <= 15) { //小于等于5说明到位置了
clearInterval(obj.timer);
//目标值为200,400.offsetLeft为203,403要更新一下
obj.style.left = target + 'px';
}
},10)
}
//找到元素
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var warp = document.getElementById('all');
var oUl = warp.children[0].children[0];
var ullis = oUl.children;
var ol = warp.children[0].children[1];
var ollis = ol.children;
var timer = null;
var num = 0;
var key = 0;
var result = 0;
for(var i=0;i<ollis.length;i++) {
ollis[i].index = i;
ollis[i].onmouseover = function() {
for(var j=0;j<ollis.length;j++) {
ollis[j].className = '';
}
this.className = 'current';
animate(oUl,-this.index * 520);
num = key = this.index;
}
}
timer = setInterval(autoplay,1000);
function autoplay() {
banner();
}
warp.onmouseover = function() {
clearInterval(timer);
}
warp.onmouseout = function() {
timer = setInterval(autoplay,1000);
}
//手动切换
next.onclick = function() {
banner();
}
prev.onclick = function() {
num --;
if(num < 0) {
ul.style.left = -2600 + 'px'; // 迅速调回
num = 4; // 因为第6张就是第一张 第6张播放 下次播放第2张
}
animate(oUl,-num * 520);
key --;
if(key < 0) { //因为索引是从0开始的
key = ollis.length-1;
}
for(var k=0;k<ollis.length;k++) {
ollis[k].className = '';
}
ollis[key].className = 'current';
}
function banner(){
num ++;
if(num > ollis.length) {
ul.style.left = 0; // 迅速调回
num = 1; // 因为第6张就是第一张 第6张播放 下次播放第2张
}
animate(oUl,-num * 520);
key ++;
if(key > ollis.length-1) { //因为索引是从0开始的
key = 0;
}
for(var k=0;k<ollis.length;k++) {
ollis[k].className = '';
}
ollis[key].className = 'current';
}
</script>
</div>
</body>
</html>
原生JS实现淘宝无缝轮播的更多相关文章
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 纯js实现淘宝商城轮播图
需求: 循环无缝自动轮播3张图片,点击左右箭头可以手动切换图片,鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片.鼠标放到轮播图的图片上时不再自动轮播,鼠标移开之后又继续轮播.效果图: 下面是htm ...
- 原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
- javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...
- 原生JS实现移动端的轮播效果
首先 我们想实现的效果是在手指按下拖动的时候图片能够跟随移动(无动画效果)然后松开手指后判断图片移动的位置 和某一个值进行比较 在这里我们默认定为盒子的1/3宽度 当x轴的移动位置大于1/3的时候图片 ...
随机推荐
- Swing-BoxLayout用法-入门
注:本文内容源于http://www.java3z.com/cwbwebhome/article/article20/200016.html?id=4797:细节内容根据笔者理解有修改. BoxLay ...
- 团队作业4——第一次项目冲刺（Alpha版本） Day1
1.开站立式会议: 2.Leangoo任务分解图: 3.开会讨论的结果,任务分派 队员 今日进展 明日安排 林燕 调查产品的市场需求,学习微信开发 完善逻辑架构框架 王李焕 结合实际分析系统设计思路, ...
- 学号：201521123116 《java程序设计》第七周学习总结
1. 本周学习总结 2. 书面作业 Q1 ArrayList代码分析 1.1 解释ArrayList的contains源代码ArrayList的contains源代码 1.2 解释E remove(i ...
- 201521123099 《Java程序设计》第2周学习总结
1. 本周学习总结 1.Java对我来说难度还是很大.需要花更多时间去学习. 2. 书面作业 1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)?分析String使用什么来 ...
- 2017Java课程设计201521123007
1. 课程设计博客链接 项目地址 2. 个人负责模块或任务说明 ps:一个人做的项目 一个登录jsp文件,登录成功转入商品界面, 一个商品jsp文件,显示所有商品信息,数据从MySql数据库导入,可以 ...
- 201521123060 《Java程序设计》第10周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 异常: 1.不要乱用异常: 2.异常发生时:确定异常类型,异常位置: 3.尽量使用已有的异常类. 多线程: 2 ...
- 201521123115《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 201521123070《Java程序设计》 第11周学习总结
本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用 ...
- Struts第八篇【资源国际化、对比JSP的资源国际化】
资源国际化 我们在学JSTL标签的时候就涉及到了资源国际化,,,但是呢,在JSP的章节我并没有写博文来讲解怎么弄-.一方面感觉JSP的资源国际化好麻烦,另一方面是感觉用的地方很少-..因此就没有深入去 ...
- Maven：常用命令
1, 将第三方的jar包安装到本地仓库中 mvn install:install-file -Dfile=**/*.jar -DgroupId=XXX -DartifactId=YYY -Dversi ...