运动版的轮播图,有左右按钮和单独分页

这个例子重点在于:

  • 运动框架的复习,要灵活运动回调函数
  • 始终以全局变量iNum来控制oUl的移动目的地,每次有任何动作,都是先判断iNum并改变iNum后去调用运动函数
  • 刚才在复查代码的时候发现个奇怪的现象,在ie11和cent browser打开的时候居然不会滚动,iNum倒是在变化,突然想到之前在看妙味课堂的时候有老师提到一句,给要运动的元素,在加上position:absolute后,如果不加上left:0;top:0会有兼容问题,所以,我给oUl加上了left:0;top:0;就解决了问题。
<style>
ul,h2,p{
padding: ;margin: ;list-style: none;
}
#wrap{
width: 600px;
height: 450px;
border: 1px solid black;
margin: 100px auto;
position: relative;
overflow: hidden;
}
img{
width: 600px;height: 450px;
}
ul{
overflow: hidden;
position: absolute;
}
#list{
width: 3600px;
left: ;top: ;
}
li{
float: left;
}
span{
position: absolute;
width: 40px;height: 40px;
font-weight: bold;
font-size: 34px;
line-height: 40px;
opacity: 0.6;
text-align: center;
top: %;
margin-top: -20px;
background: white;
z-index: ;
}
#left{
left: ;
}
#right{
right: ;
}
span:hover{
cursor: pointer;
background: orangered;
}
#btns{
bottom: 10px;right: 10px;
}
#btns li{
width: 15px;height: 15px;
background: orange;
margin: 4px;
cursor: pointer;
}
#btns li.active{
background: orangered;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
var aSpan = document.getElementsByTagName('span');
var oBtn = document.getElementById('btns');
var aBtn = oBtn.getElementsByTagName('li');
var aImg = document.getElementsByTagName('img');
var timerAuto = null;
var iNum = ;
var newTarget = ;
var w = aImg[].offsetWidth;
 
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
 
function doMove(obj,attr,dir,target,endFn){
dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr))+dir;
if(speed>target&&dir> || speed<target&&dir<){
speed=target;
}
obj.style[attr]=speed+'px';
if(speed==target){
clearInterval(obj.timer);
endFn&&endFn();
}
},);
}
 
function changeColor(index){
for (var i=; i<aBtn.length; i++) {
aBtn[i].className = '';
}
aBtn[index].className = 'active';
}
 
function moveAuto(){
clearInterval(timerAuto);
timerAuto = setInterval(function(){
if(iNum!=aLi.length-){
iNum++;
doMove(oUl,'left',,-iNum*w);
}else{
iNum = ;
clearInterval(timerAuto);
doMove(oUl,'left',,-iNum*w,moveAuto);
}
changeColor(iNum);
},);
}
 
moveAuto();
 
for (var i=; i<aSpan.length; i++) {
aSpan[i].index = i;
aSpan[i].onclick = function(){
clearInterval(timerAuto);
if(this.index == ){
if(iNum == aLi.length - ){
iNum = ;
 
doMove(oUl,'left',,-(w*iNum),moveAuto);
}else{
iNum++;
doMove(oUl,'left',,-(w*iNum),moveAuto);
}
}else{
if(iNum == ){
iNum = aLi.length - ;
doMove(oUl,'left',,-(w*iNum),moveAuto);
}else{
iNum--;
doMove(oUl,'left',,-(w*iNum),moveAuto);
}
}
changeColor(iNum);
};
}
 
for (var i=; i<aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onmouseover = function(){
changeColor(this.index);
clearInterval(timerAuto);
iNum = this.index;
doMove(oUl,'left',,-(w*iNum));
};
aBtn[i].onmouseout = function(){
moveAuto();
};
}
};
</script>
</head>
<body>
<div id="wrap">
<span id="left"><</span>
<span id="right">></span>
<ul id="list">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
<ul id="btns">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>

【原】运动版的轮播图,有左右按钮和单独分页,原生JS版的更多相关文章

  1. 少写代码帮你模块化方法 & 运动框架 & 简化轮播图

    模块化就是通过每一个js里封装一个方法:用exports将他输出, 在下一个js用require的方法加载js时就会将方法输出.然后在主页面引入require.js; 模块化基本写法: define( ...

  2. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  3. 【jQuery】全功能轮播图的实现(本文结尾也有javascript版)

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

  4. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  5. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  6. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  8. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue music-抓取歌单列表数据(渲染轮播图)

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

随机推荐

  1. UVA 12549 - 二分图匹配

    题意:给定一个Y行X列的网格,网格种有重要位置和障碍物.要求用最少的机器人看守所有重要的位置,每个机器人放在一个格子里,面朝上下左右四个方向之一发出激光直到射到障碍物为止,沿途都是看守范围.机器人不会 ...

  2. Samba - 文件共享服务器的搭建和配置

    下载与安装: deb包安装 官方deb包下载:http://packages.ubuntu.com/ 命令安装dpkg –i xxxx.deb (安装不成功留意日志安装依赖包) apt安装 apt-g ...

  3. c# DllImport 找不到指定模块

    两年前的一个项目,基于身份证阅读器的开发,之前都是在公司电脑上开发维护等,今天有需要用到自己的笔记本,只有vs2008和mysql5.5,以为足够,兴致勃勃的拿到客户那里现场解决问题,F5运行程序,程 ...

  4. ubuntu eclipse 中安装 python + PyDev

    参照网络和个人总结 系统配置:ubuntu12.04       jdk:1.6      eclipse:3.4 首先你的系统必须安装好pyton .也ubuntu系统自带的 刚开始以为是jdk安装 ...

  5. 第三个Sprint冲刺第十天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:做最后的工作

  6. Activity、Task、应用和进程

    http://www.cnblogs.com/franksunny/archive/2012/04/17/2453403.html Activity.Task.应用和进程 为了阅读方便,将文档转成pd ...

  7. Python 基礎 - 字符串常用操作

    字符串常用操作 今天就介紹一下常用的字符串操作,都是以 Python3撰寫的 首字母變大寫 #!/usr/bin/env python3 # -*- coding:utf-8 -*- name = & ...

  8. CEPH经常出现slow request的排查解决

    现象: 通过ceph -w日志经常发现有request blocked的问题(如果虚拟机系统跑在ceph上时,就会发现严重的卡顿现象) 排查: 1.通过dstat未发现有明显的瓶颈 (dstat -t ...

  9. 使用 RequireJS 优化 Web 应用前端

    基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...

  10. ionic中的service简单写法

    在service中写服务 服务名叫feedService .service('feedService',function($ionicLoading,$q,$http){ return{ //获取反馈 ...