原生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>

</li>
<li>

</li>
<li>

</li>
<li>

</li>
<li>

</li>
<li>

</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的时候图片 ...

随机推荐

201521123024 《Java程序设计》第5周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能编 ...
201521123086《java程序设计》第四周
本章学习总结尝试使用思维导图总结有关继承的知识点 1.2 使用常规方法总结其他上课内容. 为了不必要写重复的代码,可以运用继承,用关键字extends来定义一个类,被继承的类叫做父类,继承的类叫做子 ...
201521123006 《java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
201521123069 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
JavaScript 基本语法结构
1 变量 JavaScript的变量是弱类型的,就是所有的对象都是使用var 来进行声明 2 变量的命名规则 1.由字母.数字.下划线组成,区分大小写 2.以字母开头 3.变量名不能有空格 4.不能使 ...
mapreduce自定义排序(map端1.4步)
3 3 3 2 3 1 2 2 2 1 1 1 -----------------期望输出 1 1 2 1 2 2 3 1 3 2 3 3 将以上数据进行排序,排序规则是:按照第一列升序排序,如果第一 ...
ACM学习之路___HDU 5723(kruskal + dfs)
Abandoned country Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s) ...
CentOS7安装后配置MariaDB
安装后,优先推荐先对安全设置进行配置,键入命令 sudo mysql_secure_installation 键入当前密码,当前没有,直接回车,之后跟随提示会问几个问题:设置 root 密码? / 移 ...
TCP/IP（七）之玩转HTTP协议
前言前面一篇的博文简单的介绍了一下属于应用层的HTTP协议,这一篇我将详细的学习HTTP协议,这也是做Web开发中一定要用到的协议.虽然我是做大数据的,但是多学习一点肯定是没有坏处的.国庆放假7天 ...
Android在普通类（非Activity，多数为Adapter）中传输数据为空值解决方法：在startActivity 用 intent传输数据
这是bundle是传输不了数据的,获取到出现这种情况的原因是非activity类中不存在Context,而在活动中传输数据时需要Context. 我收集到了两种解决方法. 1. 在调用该Adapte ...

原生JS实现淘宝无缝轮播

原生JS实现淘宝无缝轮播的更多相关文章

随机推荐

热门专题