原文：http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>淘宝首页图片轮播效果</title>

<style>

<!--

* {margin: 0;padding:0;}

body {background: #222;}

ol {list-style: none;}

img {border: 0 none;}

#slider {

 border: 1px solid #F60;

 width: 490px;

 height: 170px;

 overflow: hidden;

 position: relative;

 margin: 2em auto;

}

#slider .player {

 /*width: 2450px;

 height: 850px;*/

 position: absolute;

 top: 0px;

 left: 0px;

}

#slider .player li {

 width: 490px;

 height: 170px;

}

#slider .btns {

 position: absolute;

 right: 10px;

 bottom: 5px;

 height: 30px;

}

#slider .btns li {

 font: 13px Tahoma, Arial, 宋体, sans-serif;

 float: left;

 margin: 0 3px;

 border: 1px solid #F60;

 background-color: #FFF;

 color: #CC937A;

 opacity: .8;

 cursor: pointer;

 width: 20px;

 height: 20px;

 line-height: 19px;

 text-align: center;

 -moz-border-radius: 10px;

 -webkit-border-radius: 10px;

 border-radius: 10px;

}

#slider .btns li.active {

 background: #F60;

 color: #FFF;

 font-weight: bold;

 opacity: 1;

}

-->

</style>

<script>

//<![CDATA[

function $(id) {

 return document.getElementById(id);

};

function getByClass(className, context) {

/*

 * 功能说明：

 * 传入类名、节点名（默认document），获取context下类名为classNa的节点

 */

 context = context || document;

 if(context.getElementsByClassName) {

  return context.getElementsByClassName(className);

 } else {

  var nodes = [];

  var tags = context.getElementsByTagName('*');

  for(var i=0, len=tags.length; i<len; i++) {

   if(hasClass(tags[i], className)) {

    nodes.push(tags[i]);

   }

  }

  return nodes;

 }

}

function hasClass(node, className) {

/*

 * 功能说明：

 * 传入节点及一个类名，检查该节点是否含有传入的类名

 */

 var names = node.className.split(/\s+/);

 for(var i=0, len=names.length; i<len; i++) {

  if(names[i] == className) {

   return true;

  }

 }

 return false;

}

function animate(o,start,alter,dur,fx) {

/*

 * 功能说明：

 * 设置动画

 * o:要设置动画的对象

 * start:开始的对象

 * alter:总的对象

 * dur:动画持续多长时间

 * fx:动画类型

 */

 var curTime=0;

 var t=setInterval(function () {

  if (curTime>=dur) clearInterval(t);

  for (var i in start) {

   o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";

  }

  curTime+=40;

 },40);

 return function () {

  clearInterval(t);

 };

}

var Tween = {

/*

 * 功能说明：

 * 加速运动

 * curTime:当前时间,即动画已经进行了多长时间,开始时间为0

 * start:开始值

 * alter:总的变化量

 * dur:动画持续多长时间

 */

 Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动

 Quad:{//二次方缓动

  easeIn:function (start,alter,curTime,dur) {

   return start+Math.pow(curTime/dur,2)*alter;

  },

  easeOut:function (start,alter,curTime,dur) {

   var progress =curTime/dur;

   return start-(Math.pow(progress,2)-2*progress)*alter;

  },

  easeInOut:function (start,alter,curTime,dur) {

   var progress =curTime/dur*2;

   return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;

  }

 },

};

function Player(btns, scrollContent, imgHeight, timeout, hoverClass) {

/*

 * btns:按钮，类型是数组

 * scrollContent:摇滚动的块，一个DOM对象，这里是ol

 * imgHeight:每一张图片的高度，当然，如果想改成左右滚动，这里传入每一张图片的宽，唯一需要注意的是每一张图片宽高必须相同，图片数量可调整

 * timeout:切换速度快慢，默认为1.5ms

 * hoverClass:每一个按钮激活时的类名

*/

 hoverClass = hoverClass || 'active';

 timeout = timeout || 1500;

 this.btns = btns;

 this.scrollContent = scrollContent;

 this.hoverClass = hoverClass;

 this.timeout = timeout;

 this.imgHeight = imgHeight;

 var _this = this;

 for(var i=0; i<btns.length; i++) {

  this.btns[i].index = i;

  btns[i].onmouseover = function() {

   _this.stop();

   _this.invoke(this.index);

  }

  btns[i].onmouseout = function() {

   _this.start();

  }

 }

 this.invoke(0);

}

Player.prototype = {

 constructor : Player,

 start : function() {

  var _this = this;

  this.stop();

  this.intervalId = setInterval(function() {

   _this.next();

  }, this.timeout);

 },

 stop: function() {

  clearInterval(this.intervalId);

 },

 invoke: function(n) {

  this.pointer = n;

  if(this.pointer >= this.btns.length) {

   this.pointer = 0;

  }

  this.clearHover();

  this.btns[this.pointer].className = this.hoverClass;

  //this.scrollContent.style.top = parseInt(-this.imgHeight * this.pointer) + 'px';

  var startVal = parseInt(this.scrollContent.style.top) || 0;

  var alterVal = (parseInt(-startVal - this.imgHeight * this.pointer));

  this.animateIterval && this.animateIterval();//修正快速切换时闪动

  this.animateIterval=animate(this.scrollContent, {top : startVal},{top : alterVal}, 1000, Tween.Quad.easeOut);

  //这里默认设置每张图滚动的总时间是1s

 },

 next: function() {

  this.invoke(this.pointer + 1);

 },

 clearHover: function() {

  for(var i=0; i<this.btns.length; i++) {

   this.btns[i].className = '';

  };

 }

}

window.onload = function() {

 var btns = getByClass('btns', $('slider'))[0].getElementsByTagName('li');

 var player = getByClass('player', $('slider'))[0];

 var player = new Player(btns, player, 170, 1500, undefined);

 player.start();

 //player.invoke(2);

}

//]]>

</script>

</head>

<body>

<div id="slider">

 <ol class="player">

  <li><a href=""><img src="/hope2008/Education/UploadFiles_5303/201103/20110304195203607.gif" alt="1" /></a></li>

  <li><a href=""><img src="/hope2008/Education/UploadFiles_5303/201103/20110304195203167.jpg" alt="2" /></a></li>

  <li><a href=""><img src="/hope2008/Education/UploadFiles_5303/201103/20110304195204315.jpg" alt="3" /></a></li>

  <li><a href=""><img src="/hope2008/Education/UploadFiles_5303/201103/20110304195204559.jpg" alt="4" /></a></li>

  <li><a href=""><img src="/hope2008/Education/UploadFiles_5303/201103/20110304195204728.jpg" alt="5" /></a></li>

 </ol>

 <ol class="btns">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

 </ol>

</div>

</body>

</html>

js实现淘宝首页图片轮播效果的更多相关文章

  1. 使用js制作一般网站首页图片轮播效果

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

  2. 【原创smarty仿淘宝商品图片轮播+放大镜效果】

    1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...

  3. axure 动态面板实现图片轮播效果（淘宝）

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

  4. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  7. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  8. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  9. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

随机推荐

  1. corosync集群的选举算法

    <Cluster Concepts> http://linux-ha.org/wiki/Cluster_Concepts <Managing Computers with Autom ...

  2. 关于基本视频播放的Demo

    最近在做一个视频的Demo,当然是仿的别人的,现贴出原文地址:http://code4app.com/forum.php?mod=viewthread&tid=8959&highlig ...

  3. POJ 1995 Raising Modulo Numbers

    快速幂取模 #include<cstdio> int mod_exp(int a, int b, int c) { int res, t; res = % c; t = a % c; wh ...

  4. ubuntu16安装KVM

    apt install qemu-kvm libvirt-bin apt install openvswitch-switch

  5. 关于Java通过JNI调用C 动态链接库（DLL）

    JNI介绍 用JNI实现Java和C语言的数据传递 JNI原理分析和详细步骤截图说明 jni的JNIEnv指针和jobject指针 JNI实现回调| JNI调用JAVA函数|参数和返回值的格式 Jni ...

  6. beamer中插入c代码，python代码的经验

    下面是插入的scala代码,它与python在某些语法上类似,所在在https://github.com/olivierverdier/python-latex-highlighting下载了一个py ...

  7. ora-12154

    64位oracle,32位pl/sql pl/sql配置完之后,一直报错: ora-12154 配置环境变量ORACLE_HOME:D:\softInstrall\oracle\product\11. ...

  8. 正确的 Composer 扩展包安装方法

    问题说明 我们经常要往现有的项目中添加扩展包,有时候因为文档的错误引导,如下图来自 这个文档 的: composer update 这个命令在我们现在的逻辑中,可能会对项目造成巨大伤害. 因为 com ...

  9. js观察者模式与Model

    目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...

  10. RAC 开启gsd和oc4j服务

    Oracle 11g RAC中,发现oc4j以及gsd服务都处于offline状态,这是Oracle 11g RAC默认情形.即便如此,并不影响数据库的使用,因为 oc4j 是用于WLM 的一个资源, ...