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

随机推荐

201521123103 《Java学习笔记》第七周学习总结
一.本周学习总结 1.以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 二.书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码源代码如下: pub ...
201521123003《Java程序设计》第4周学习总结
1. 本章学习总结你对于本章知识的学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 参考资料: 百度脑图 XMind 1.2 使用常规方法总结其他上课内容. (1)了解了类型转换(cast) ...
201521123045 《JAVA程序设计》第1周学习总结 1
1. 本周学习总结学习了入门的java知识,知道了jdk.eclipse等基础软件,了解了如何编译最基础的java程序.知道了java的基本原理以及java的几种数据类型.掌握使用简单编译器编写ja ...
sublime列显示控制
Shift+右键拖拽或者Ctrl+左键单击选择多个位置
Hibernate table schema 的设置与应用
hibernate在实现实体映射时,DB无需强行指定.部署时会较对DB户名和密码,根据用户名以访问的表完成实体映射.如果一个帐号可以访问一个数据库的下多个表,以oracle为例用户user1下面有表t ...
ACM学习之路___HDU 1385(带路径保存的 Floyd)
Description These are N cities in Spring country. Between each pair of cities there may be one trans ...
Ubuntu16.04.1上搭建分布式的Redis集群
为什么要集群: 通常为了,提高网站的响应速度,总是把一些经常用到的数据放到内存中,而不是放到数据库中,Redis是一个很好的Cache工具,当然了还有Memcached,这里只讲Redis.在我们的电 ...
机器视觉----LBP
最近一直在做多视图的聚类与分裂,想要图片有更多的视图,就得对图片的特征进行抽取,那我们来聊聊图片的LBP特征. Local binary patterns (局部二值模式),是机器视觉中重要的一种特征 ...
如何用kaldi做孤立词识别-初版
---------------------------------------------------------------------------------------------------- ...
python 库之lxml安装坑一个
error: command 'C:\\Users\\Admin\\AppData\\Local\\Programs\\Common\\Microsoft\\Visual C++ for Python ...

原生JS实现淘宝无缝轮播

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

随机推荐

热门专题