原生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 ...
随机推荐
- Git学习 -- 冲突解决
当连个分支对统一文件提交了不同修改时,可能会出现冲突,例如: $ git merge feature1 Auto-merging readme.txt CONFLICT (content): Merg ...
- Oracle新建用户赋只读某几张表的权限
create user JSETI_WZQ identified by abcdef; -- 假设abcdef是密码 grant connect,resource to JSETI_WZQ; gran ...
- 最短路径算法专题2----Dijkstra
这个算法适用于求单源最短路径,从一点出发,到其余个点的最短路径. 算法要点: 1.用二维数组存放点到点的距离-----不能相互到达的点用MAX代替距离 2.用dis数组存放源点到任意其他一点的距离-- ...
- Notice: ob_end_clean() [ref.outcontrol]: failed to delete buffer. No buffer to delete
解决方法一 @ob_end_clean(); 解决方法二 if(ob_get_contents()) ob_end_clean();
- SD卡的SPI模式的初始化顺序（转）
为了使SD卡初始化进入SPI模式,我们需要使用的命令有3个:CMD0,ACMD41,CMD55(使用ACMD类的指令前应先发CMD55,CMD55起到一个切换到ACMD类命令的作用). 为什么在使用C ...
- maven编码 gbk 的不可映射字符解决办法
出现这个问题修改一下pom文件的编译配置就好了. <plugin> <groupId>org.apache.maven.plugins</groupId> < ...
- Python的import嵌套
[root@fuel ~]# vi /var/lib/docker/devicemapper/mnt/4da57a0078c9d3f32e819373b67de41da37c34a27ee03f740 ...
- Qt5：Qt中一些函数功能介绍
1 .setContentsMargins 该函数用于设置窗口客户区中,四周空白边框的尺寸 , 类似于 word 中的 页边距设置 2.canonical Path 返回文件路径的规范路径 , 也就 ...
- php运行机制初探
对于这个结果我也很吃惊,但是事实就在眼前,没办法啊,那么到底为什么会有这样的效果呢,咱们继续一探究竟: *.php(php代码) -----Scanner(zend引擎逐行扫描变为zend可以识别的语 ...
- 继续几道经典的js题（局部和全局变量，对象等）
1. //现有代码如下:var foo = 1;function main(){alert(foo);var foo = 2;alert(this.foo)this.foo = 3;}//1.请给出以 ...