js实现淘宝首页图片轮播效果
原文：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实现淘宝首页图片轮播效果的更多相关文章
- 使用js制作一般网站首页图片轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【原创smarty仿淘宝商品图片轮播+放大镜效果】
1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...
- axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片 将图片引入至axure中,将引入的第一张图片转为 ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
随机推荐
- js动画（三）
咳咳咳咳,感冒了感冒了,鼻塞,蓝瘦啊!嘴巴也开裂,哎,心疼自己.想到这是第三只唇膏了!只怪,放荡不倔爱自由, 行驶在冷风路上么,北风那个吹啊吹啊吹啊,好了,发神经发完了,接下来进入正题,严肃脸.(字数 ...
- 第五弹：VGG
接下来讲一个目前经常被用到的模型,来自牛津大学的VGG,该网络目前还有很多改进版本,这里只讲一下最初的模型,分别从论文解析和模型理解两部分组成. 一.论文解析 一:摘要 -- 从Alex-net发展而 ...
- Ubuntu和win10双系统Grup无法引导解决方案
通常我们经常安装双系统, 但是有时候安装完系统无法正常引导, 以下就说明Ubuntu和win10双系统, win10在grub界面不断循环的解决方案 直接在win10启动项目上按e进入编辑模式 在文档 ...
- windows 下nginx 虚拟主机搭建
需要在 nginx.conf里面引入刚才配置的那个文件 第一步 加东西 http的节点里面加上 一定要注意的是:必须以 ; 结尾 include D:/phpen/nginx-1.3.6/co ...
- 1602A液晶
液晶显示屏中,1602型算是比较简单的一种,据说和12864还是全兼容的.这两天学习的结果如下.一.1602里的存储器有三种:CGROM.CGRAM.DDRAM.CGROM保存了厂家生产时固化在LCM ...
- CSS实现背景透明而背景上的文字图片不透明
1.用图片则能兼容IE8和IE7 2.用颜色则不能兼容IE8和IE7,并且颜色层不能随着内容层自增长,只能设置一个固定高度 3.用颜色则颜色层不能包含内容层(图片和文字) <!-- wrap最外 ...
- Elasticsearch基础教程
Reference: http://blog.csdn.net/cnweike/article/details/33736429 基础概念 Elasticsearch有几个核心概念.从一开始理解这些概 ...
- ubuntu 16.04 php 安装curl方法
先查看自己的php是否已经安装了curl.方法如下:1.在web服务器目录( Ubuntu下的通常为 /var/www )新建test.php文件2.编辑文件,键入下面一行代码:<?php ph ...
- UVa 10812 - Beat the Spread!
题目大意:知道一场橄榄球比赛比分的和以及差的绝对值,算出这两个数.注意判断结果的可能性(比分为非负数). #include <cstdio> int main() { #ifdef LOC ...
- android模拟器网络设置（局域网）
Android模拟器如何设置DNS访问局域网内网站 我们需要用到android-sdk开发包中adb shell指令 见下图