原生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 ...
随机推荐
- cortexm内核 栈的8字节对齐及关键字PRESERVE8
一.什么是栈对齐? 栈的字节对齐,实际是指栈顶指针须是某字节的整数倍.因此下边对系统栈与MSP,任务栈与PSP,栈对齐与SP对齐 这三对概念不做区分.另外下文提到编译器的时候,实际上是对编译器汇编器连 ...
- panel 绑定鼠标滚轮事件
void formsample_mousewheel(object sender, MouseEventArgs e) { //获取光标位置 Point mousepoint = new Point( ...
- ajax请求dotnet webservice格式
$.ajax({ type: "post", url: "your_webservice.asmx/you_method", contentType: &quo ...
- Android应用程序基础
Android程序使用Java语言编写.Android开发套件把数据.资源文件和Java代码编译到一个.以.apk为后缀名的Android压缩包中.一个单独的apk文件中的所有代码被认为是一个andr ...
- cisco 密码重置
密码重置 分类: 转贴技术资料 2007-12-28 16:38 http://www.cisco.com/en/US/products/hw/routers/ps259/products_passw ...
- rpm命令说明
RPM命令常用参数 RPM的常规使用方法为rpm-?package.rpm,其中-?为操作参数(更多信息,请查阅帮助$manrpm): -q在系统中查询软件或查询指定rpm包的内容信息-i在系统中安装 ...
- dubbo Forbid blacklist
http://www.jameswxx.com/dubbo/%E8%A7%A3%E5%86%B3dubbo%E9%97%AE%E9%A2%98%EF%BC%9Aforbid-consumer/
- java集合框架list和set
为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一中方式 数组和集合类同是容器,有何不同? 数组虽然也可以存储对象 ...
- jsp内部传参与重定向传参
1 重定向地址栏会发生改变,因为它会发送两次请求,内部转发,地址栏不会发生改变,因为它只有一个请求2 重定向不能获取上一次请求中的参数,而内部转换可以3 内部转发可以访问WEB-INF下的资源,重定向 ...
- 1.2 selenium IDE录制脚本
1.打开Firefox浏览器中 selenium IDE