原生js-焦点图轮播
首先是html实现页面结构及主程序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本动画-焦点图轮播</title>
<style type="text/css">
#outer{ width:450px; height:230px; position:relative; margin:50px auto; background:pink; overflow:hidden;}
#inner{ width:2700px; height:230px; position:absolute; top:0px; left:0;}
#inner div{ width:450px; height:230px; float:left; line-height:230px; text-align:center; font-size:36px; font-weight:bold; color:#fff; background:red;}
ul#btn{ margin:0; padding:0; list-style:none; position:absolute; bottom:15px; right:15px; height:30px; width:230px;}
ul#btn li{ float:left; width:25px; margin-right:5px; height:25px; border:4px solid orange; border-radius:50%; font-size:24px; font-weight:bold; line-height:25px; text-align:center; background:#366; cursor:pointer; -webkit-user-select:none; }
ul#btn li.current{ background:white;}
</style>
</head> <body>
<div id="outer">
<div id="inner">
<div>111111111111</div>
<div style="background:yellow; color:blue">222222222222</div>
<div style="background:black;">333333333333</div>
<div style="background:purple;">444444444444</div>
<div style="background:blue;">555555555555</div>
<div>111111111111</div> </div>
<ul id="btn">
<li class="current" >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
</ul>
</div>
</body>
</html>
<script src="move.js"></script>
<script>
var oLis=document.getElementById('btn').getElementsByTagName('li');
var oInner=document.getElementById('inner');
for(var i=0;i<oLis.length;i++){
oLis.item(i).n=i;
oLis.item(i).onclick=function(){
move(oInner,"left",this.n*-450);
}
}
var step=0;
function autoMove(){
if(step==oLis.length){//第六个图片对应是第一个li
oLis.item(0).className="";
}else{//正常情况下,step在累加之前,总是表示上一个LI的索引
oLis.item(step).className="";
}
step++;
if(step==oLis.length+1){//如果走到了第六张,则把坐标切换到第一张上来。
//alert(1);//暂停一下,更能理解原理
oInner.style.left=0;//切换坐标
step=1; //然后再从第一张往第二张上走,所以让step=1;
}
if(step==5){//第5个索引(就是第六张)对应的是第一张DIV,所以这儿要做个判断
oLis.item(0).className="current";
}else{//正常情况下走到第几张,就让对应的li切换背景
oLis.item(step).className="current";
}
move(oInner,"left",step*-450);
}
window.setInterval(autoMove,2000);
</script>
接下来在move.js里实现辅助函数
function move(ele,attr,target,fnCallback){
clearInterval(ele[attr+"timer"]);
function _move(){//闭包方法
var cur=css(ele,attr);//当前位置
var nSpeed=(target-cur)/10;
nSpeed=nSpeed>0?Math.ceil(nSpeed):Math.floor(nSpeed);
css(ele,attr,cur+nSpeed);
if(nSpeed===0){
clearInterval(ele[attr+"timer"]);
ele[attr+"timer"]=null;
if(typeof fnCallback=="function"){
fnCallback.call(ele);
//用call去执行fnCallback,则可以让fnCallback在运行的时候,里面的this关键字指向当前运动的这个元素
}
//ele.style.backgroundColor="green";
}
}
ele[attr+"timer"]=window.setInterval(_move,20);
} function css(ele,attr,val){//如果传两个参数,则是取值。三个参数,则赋值
if(typeof val=="undefined"){
try{
return parseFloat(window.getComputedStyle(ele,null)[attr]);
}catch(e){
return parseFloat(ele.currentStyle[attr]);
}
}else if(typeof val=="number"){
if(attr=="opacity"){
ele.style.opacity=val;
ele.style.filter="alpha(opacity="+val*100+")";
}else{
ele.style[attr]=val+"px";
}
}
}
原生js-焦点图轮播的更多相关文章
- [Js]焦点图轮播效果
一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...
- 原生JavaScript实现焦点图轮播
不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- JavaScript基础 -- 焦点图轮播(转载)
首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
随机推荐
- SqlServer传输数据到ORACLE,SSIS
一.配置32位ODBC 配置tnsname文件,增加ORACLE数据库 打开32位ODBC 二.创建一个PROJECT并配置数据源 1.创建一个project 三.数据传输SSIS,工作流 四.为DT ...
- R常见的几种常见统计图
1,向日葵散点图 2,热图 (颜色越深,数值越大) 3,折线图(散点图),绘制散点图集用 paris(data.frame)
- InstallShield Limited Edition for Visual Studio 2013 图文教程
http://www.wuleba.com/?p=23892 原文链接
- Java重点之小白解析--浅谈HashMap与HashTable
这是一个面试经常遇到的知识点,无论什么公司这个知识点几乎是考小白必备,为什么呢?因为这玩意儿太特么常见了,常见到你写一百行代码,都能用到好几次,不问这个问哪个.so!本小白网罗天下HashMap与Ha ...
- jQuery Mobile 工具栏
jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索 ...
- VS2010+C#+在新建类或接口时在文件开头自动生成作者和日期等备注
今天在公司项目准备开始,为达到项目的规范管理,要求每个文件的标准日期,作者等信息,搜集了百度的资料,新建文件时效果如下: 其实原理很简单,只要修改VS,IDE文件下的类(或接口)模版代码 文件路径:C ...
- 使用yield关键字让自定义集合实现foreach遍历
一般来说当我们创建自定义集合的时候为了让其能支持foreach遍历,就只能让其实现IEnumerable接口(可能还要实现IEnumerator接口) 但是我们也可以通过使用yield关键字构建的迭代 ...
- 【python】将一个正整数分解质因数
def reduceNum(n): '''题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5''' print '{} = '.format(n), : print 'Pleas ...
- java 集合知识整理
java集合类图 HashMap和Hashtable的区别 HashMap HashTable 继承方式 extends AbstractMap implements Map extends D ...
- 总结下用Vue.js和webpack遇到的问题
这段时间用vue.js+webpack做一个单页应用的demo,第一次尝试模块化,技术水平有限,学习不够深入,总是遇到各种问题,所谓前事不忘后事之师,so记录下. 1.ES6匿名函数里面this值 结 ...