首先是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-焦点图轮播的更多相关文章

  1. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  2. 原生JavaScript实现焦点图轮播

    不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...

  3. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  4. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  5. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  6. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  7. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  9. JavaScript基础 -- 焦点图轮播(转载)

    首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...

  10. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

随机推荐

  1. eclipse导入PIL报错

    有些模块,比如PIL,已经装入过,但是在pydev中无法自动提示,甚至有报 unresolved import的问题,虽然不会引起运行时问题,但是无法实现自动提示,还是一件很麻烦的事情. 下面有个解决 ...

  2. EBS 追前台最后一个执行的sql

    首先 从前台获取sid 然后 获取sql地址 ; 最后 获取sql文本 select * from v$sqltext_with_newlines t where t.ADDRESS = '07000 ...

  3. zabbix3.0安装部署文档

    zabbix v3.0安装部署 摘要: 本文的安装过程摘自http://www.ttlsa.com/以及http://b.lifec-inc.com ,和站长凉白开的<ZABBIX从入门到精通v ...

  4. WPF自适应窗体实现小结

    WPF自适应窗体实现小结 这几天,因工作需要,要对一个小软件进行UI调整.主要内容就是让其能够实现自适应窗体(包括文字和图标),做成像WIN7下的Media Center一样的UI.自适应窗体,顾名思 ...

  5. Java abstract class 和 interface 的区别

    Java abstract class 和 interface 的区别 1. abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制 2. 以Door的抽象概 ...

  6. orcl 中decode的妙用

    在不认识这个函数之前,我们要对同一张表或者同一查询语句块中的某一个字段进行计算分类统计时,要用到很多函数以及外连接.用这一函数往往可以解决很多复杂的东西. 网上的一段具有代表性的decode用法,不用 ...

  7. Android Studio 出现Failed to open zip file的问题

    修改gradle . 首先我们打开setting搜索gradle.我们可以从该界面上看到gradle的版本.

  8. WIN32_LEAN_AND_MEAN宏

    网上说: 不加载MFC所需的模块. 用英语解释:Say no to MFC 如果你的工程不使用MFC,就加上这句,这样一来在编译链接时,包括最后生成的一些供调试用的模块时,速度更快,容量更小. 我们经 ...

  9. SQL Server 列存储性能调优(翻译)

    原文地址:http://social.technet.microsoft.com/wiki/contents/articles/4995.sql-server-columnstore-performa ...

  10. 记录Qt的一个诡异Bug

    公司的一款项目,在迭代开发阶段,突然发现运行速度越来越慢,界面切换卡顿时间在2秒以上.经过和某个不卡版本的对比,惊奇的发现程序二进制都一模一样,就几个图片资源和脚本不一样.经过差不多一天的排查,发现是 ...