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

随机推荐

201521123063 《JAVA程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 上周学习了继承和多态,满足is-a条件,但是发现会导致继承的滥用,如果只是但以的 ...
201521123020《Java程序设计》第2周学习总结
一.学习总结学习了运算符的基本使用方法: 学习了string这个特殊的类型: 学习了数组的使用方法. 二.书面作业 1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)? ...
Python[小甲鱼003小插曲之变量和字符串]
>>>teacher = 3 >>>teacher 3 #在定义了一个变量后可以之间输入整个变量即可访问这个变量. >>> teache ...
201521123037 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图, ...
MySQL集群（一）之主从复制
前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...
交互模式下测试python代码及变量的四则运算
在交互模式下,python代码可以立即执行,所以这很方便我们进行代码测试 1.命令窗口,输入python (如果没配置环境变量则需带python安装目录的绝对路径) >>> 这个就是 ...
Socket类以及 ServerSocket类讲解
Socket类套接字是网络连接的端点,套接字使应用可以从网络中读取数据,可以向网络中写入数据.不同计算机上的两个应用程序可以通过连接发送或接收字节流,以此达到相互通信的目的. 为了从一个应用程序向另 ...
cocos2dx 播放gif
起因或许有人会说,cocos2dx中直接帧动画就行了用什么GIF. 起因是为游戏内部要用到第三方平台的头像,而第三方平台的头像大多都是用到Gif,所以才会有了这个需求过程查了各种文档都没找到.但 ...
windows10 下安装node失败出现2502 2503的解决办法
下载node出现以下异常 : the install has encountered an unexpected errer installing this package.this may i ...
Linux的硬盘使用情况、挂载、SSD挂载（查看df -h不能看到的卷）
linux上的盘和window的有区别,磁盘空间必须挂载在目录上,要不然没用对与新增的硬盘.SSD固态硬盘.挂载到linux上的操作如下: df -h #显示目前在Linux系统上的文件系 ...

原生JS实现淘宝无缝轮播

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

随机推荐

热门专题