原生JavaScript之“淘宝轮播图”
轮播图是我们学习原生js的必经之路
它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，
话不多说，直接上图
HTML代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淘宝轮播图</title>
<link rel="stylesheet" href="css/initialize.css"/>
<link rel="stylesheet" href="css/tblunbotu.css"/>
</head>
<body>
<div id="container" class="clearFix">
<div id="list" class="clearFix" style="left: -520px">
<img src="img/5.jpg" alt=""/>
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/1.jpg" alt=""/>
</div>
<div id="buttons" class="clearFix">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript" src="js/tblunbotu.js"></script>
</body>
</html>
CSS样式如下：
/*
第一步：设置外部框的样式
第二步: 设置图片框的样式
第三步: 设置箭头的样式
第四步: 设置小圆点的样式
*/
#container {
margin: 50px auto;
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
#list {
position: absolute;
z-index:;
width: 3640px;
}
#list img {
float: left;
width: 520px;
height: 280px;
}
#buttons {
height: 10px;
width: 100px;
position: absolute;
left:;/*设置水平垂直居中*/
right:;/*设置水平垂直居中*/
margin: 0 auto;/*设置水平垂直居中*/
bottom: 20px;
z-index:;
} #buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #cccccc;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons .on {
background: orangered;
} .arrow {
width: 40px;
height: 40px;
display: none;
position: absolute;
top:; /*设置水平垂直居中*/
bottom:; /*设置水平垂直居中*/
margin: auto 0; /*设置水平垂直居中*/
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
z-index:;
}
.arrow:hover{
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
} #prev{
left: 10px;
}
#next{
right: 10px;
}
javascript代码如下
/**
* Created by zhm on 17.1.15.
*/
/*
*知识点：
* this使用
* DOM事件
* 定时器
*
* 思路：
* （1）设置它左右移动
* 问题：传入数字为NAN??
* 解决：在页面中增加属性style：left:0
* （2）平滑移动（移动时间固定，每次移动的距离不一样）
* 问题：连续点击出现晃动？---设置标志位
* 出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张
* 在类list的标签中增加属性style：left:-520px;
* 设置无限滚动判断
*
* （3）设置小圆点
* 首先将所有的类置为空，当前类置为on
* 绑定小圆点和图片
* 绑定小圆点和左右箭头
* 设置定时器，鼠标划上去停止，移开自动轮播
*
* */ //1.获取元素
var container = document.getElementById("container");
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var timer = null;
var timer2 = null;
var flag = true;
var index =0; //2.设置函数
function moveImg(dis) {
var time = 400;//运动的总时间
var eachTime = 10;//每次小移动的时间
var eachDis = dis/(time/eachTime);//每次小移动的距离
var newWeizhi = parseInt(list.style.left) + dis;//新位置
flag = false; function eachMove(){
if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){
list.style.left = parseInt(list.style.left) + eachDis + 'px';
}else {
flag = true;
clearInterval(timer);
list.style.left = newWeizhi + 'px';
//无限滚动判断
if (newWeizhi == 0) {
list.style.left = -2600 + 'px';
}
if (newWeizhi == -3120) {
list.style.left = -520 + 'px';
}
} }
timer = setInterval(eachMove, 10);
} //3.设置点击切换图片
next.onclick = function () {
if(!flag) return;
moveImg(-520);
//绑定箭头和小圆点
if (index == 4) {
index = 0;
} else {
index++;
}
buttonsShow();
};
prev.onclick = function () {
if(!flag) return;
moveImg(520); //绑定箭头和小圆点
if (index == 0) {
index = 4;
} else {
index--;
}
buttonsShow(); }; //4.设置小圆点的绑定 function buttonsShow() {
//将之前的小圆点的样式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
break;
}
}
buttons[index].className = "on";
} for(var i = 0 ;i<buttons.length;i++){
buttons[i].value = i;
//使用自执行函数解决i的赋值问题
(function(){
buttons[i].onclick = function(){
if(this.value == index) return;
var offset = (this.value - index)* -520;
moveImg(offset);
index = this.value;
buttonsShow();
}
})();
} //5.设置自动轮播
timer2 = setInterval(next.onclick,1500);
container.onmouseover = function(){
clearInterval(timer2);
};
container.onmouseout = function(){
timer2 = setInterval(next.onclick,1000);
};
有什么好的建议可以留言，相互讨论哟，一起进步~fighting~~
源码下载：http://files.cnblogs.com/files/Hmin2199/%E6%B7%98%E5%AE%9D%E8%BD%AE%E6%92%AD%E5%9B%BE.zip
原生JavaScript之“淘宝轮播图”的更多相关文章
- jQuery实现淘宝轮播图
我爱撸码,撸码使我感到快乐大家好,我是Counter今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子 ...
- Web前端原生JavaScript浅谈轮播图
1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...
- 原生javascript之实战 轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...
- JS学习笔记 - 运动 - 淘宝轮播图
<script> window.onload=function () { var oDiv=document.getElementById('play'); var aBtn=oDiv.g ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生Javascript实现图片轮播效果
首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
随机推荐
- 关于：hover的一点小问题
今天又用到了:hover这个伪类选择器,一个小问题搞了我好久,就是关于:hover选择的问题, 先看下css代码 .box:hover span { height: 150px; } 接下来是HTML ...
- Django - 模型表单(创建、更新、删除)
urls.py # /music/alubm/add/ url(r'^album/add/$', views.AlbumCreate.as_view(), name="album-add&q ...
- GB2312、Unicode编码等
抛出问题: 我在CPP文件中,打算输出一行阿拉伯字符:
- Windows API 之 ReadProcessMemory
ReadProcessMemory: BOOL WINAPI ReadProcessMemory( _In_ HANDLE hProcess, _In_ LPCVOID lpBaseAddress, ...
- MyEclipse8.5优化经验
第一步: 取消自动validation validation有一堆,什么xml.jsp.jsf.js等等,我们没有必要全部都去自动校验一下,只是需要的时候才会手工校验一下! 取消方法: ...
- Android AudioPolicyService和AudioPolicyManager
AudioPolicyService是Android音频系统的两大服务之一,另一个服务是AudioFlinger,这两大服务都在系统启动时有 MediaSever加载,加载的代码位于:framewor ...
- zf-关于分页必写的代码
1 存储过程 ALTER PROCEDURE [dbo].[getStatForXXGKWeb] ), ), ), @page int, -- 必写的 @pageRows int,-- 必写的 @al ...
- ZOJ 3699 Dakar Rally（贪心）
这是一道贪心题,他的贪心思想很容易想明白,我们保证油箱里的油始终是最便宜的我们最后的花费就能是最少的.实现方法就是:比如现在在i点,我们看邮箱满载能最远到达哪里,不妨设最远到达j,(j >= i ...
- HDU 2188 悼念512汶川大地震遇难同胞——选拔志愿者（基础巴什博奕）
最最最基础巴什博奕 #include<stdio.h> #include<iostream> #include<cstring> #include<cmath ...
- 阿里dom操作题
请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点. function getParents(id){ var obj=document.getElementById( ...