花了几个小时的时间,终于实现了类似淘宝主页上的中央焦点广告图的动态的水平与垂直的滑动效果,个人感觉实现出的效果还不错,挺有成就感的,后面有附件,解压后可直接运行,以下是所有html及js代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
img {
border: none;
float: left;
}
div.main {
position: relative;
width: 490px;
height: 170px;
margin: 100px auto;
}
div.box {
width: 490px;
height: 170px;
margin: 100px auto;
overflow: hidden;
}
ul.images {
list-style: none;
/*width: 2450px;*/
}
ul.images li {
float: left;
}
ul.adNav {
list-style: none;
position: absolute;
bottom: 5px;
right: 5px;
z-index: 10;
}
ul.adNav li {
font: normal 13px 'arial';
/*font-family: arial,serif;*/
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #DE7D4B;
background-color: white;
opacity: .7;
margin-left: 3px;
cursor: pointer;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
ul.adNav li.active {
font-weight: bolder;
background-color: #F60;
color: white;
opacity: 1;
}
</style>
</head>
<body>
<div id="main" class="main">
<div id="box" class="box">
<ul id="images" class="images">
<li>
<a href="#">
<img src="images/ad1.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad2.gif" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad5.png" alt="">
</a>
</li>
</ul>
<ul id="adNav" class="adNav">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<div id="main1" class="main">
<div id="box1" class="box">
<ul id="images1" class="images">
<li>
<a href="#">
<img src="images/ad6.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad7.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad8.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad9.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/ad10.png" alt="">
</a>
</li>
</ul>
<ul id="adNav1" class="adNav">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var $ = function() {
return document.getElementById.call(document, arguments[0])
};
function Scroller() {
this.init.apply(this, arguments);
this.intervalShow();
}
Scroller.prototype = {
init: function(shell, box, imageUl, navUl, visibleSize, time, direction, picWidth, picHeight) {
var imageList = imageUl.getElementsByTagName('li');
var navList = navUl.getElementsByTagName('li');
if (imageList.length !== navList.length) {
throw new Error('图片数必须与导航条的数目相同');
}
this.shell = shell;
this.box = box;
this.imageList = imageList;
this.navList = navList;
this.size = imageList.length;//图片数目
this.currentIndex = 0;//当前正在显示的图片索引
this.visibleSize = visibleSize || 170;//一个图片的宽或高
this.time = time || 500;//滑动一个图片所用时间
this.sliding = false;//是否处于滑动状态
this.timeout = null;//超时句柄
this.direction = direction || 'vertical';
this.shell.style.cssText += ';position:relative;height:' + picHeight + 'px;width:' + picWidth + 'px;';
this.box.style.cssText += ';overflow:hidden;height:' + picHeight + 'px;width:' + picWidth + 'px;';
if (this.direction === 'vertical') {//垂直滑动
imageUl.style.cssText += ';width:' + picWidth + 'px;height:' + this.size * picHeight + 'px;';
this.direction = 'scrollTop';
} else {//水平滑动
imageUl.style.cssText += ';width:' + picWidth * this.size + 'px;height:' + picHeight + 'px;';
this.direction = 'scrollLeft';
}
//为每个导航li注册mouseover与click事件
for (var i = 0, len = this.navList.length; i < len; i++) {
var navLi = this.navList[i];
var that = this;//为了在闭包中使用当前对象
navLi.onmouseover = navLi.onclick = (function(index) {
return function(e) {
if (that.sliding) {//如果还有处于滑动状态中的li,则清理timeout并将位置设置到先前最终应该到达的位置,为了防止出现频繁闪烁的现象
clearTimeout(that.timeout);
that.box.scrollTop = that.currentIndex * that.visibleSize;
}
e = e || window.event;
var target = e.target || e.srcElement;
that.slide.call(that, target, index);//在闭包内调用slide函数
}
})(i);
}
},
slide:function(target, index) {
if (Array.prototype.indexOf.call(this.navList, target) === this.currentIndex)
return;
var finalScrollPosition = index * this.visibleSize;//最终要定位到的位置
var currentScrollPosition = this.currentIndex * this.visibleSize;//当前位置
for (var j = 0,len = this.navList.length; j < len; j++) {//清除每个导航Li的样式
var li = this.navList[j];
li.className = '';
}
target.className = 'active';//设置当前li为激活状态
var moveSize = finalScrollPosition - currentScrollPosition;//本次要移动的长度
var begin = new Date().getTime();
this.currentIndex = index;
var that = this;
function animate() {//动画显示,用正统函数模拟动画效果
this.sliding = true;//处于滑动状态
var now = new Date().getTime();
var elapsed = now - begin;
if (elapsed >= this.time) {
this.box[this.direction] = finalScrollPosition;
this.sliding = false;//滑动结束
return;
}
var distance = currentScrollPosition + moveSize * Math.sin(Math.PI * 0.5 * (elapsed / this.time));
this.box[this.direction] = distance;
this.timeout = setTimeout(function() {
animate.call(that);//再次调用
}, Math.min(25, this.time - elapsed));
}
this.timeout = setTimeout(function() {
animate.call(that);//开始动画
}, 25);
},
intervalShow:function() {//间隔显示
var that = this;
setTimeout(function() {
var index = (that.currentIndex + 1) % that.navList.length;
that.slide(that.navList[index], index);
setTimeout(arguments.callee, 3000);//每隔3秒自动显示一次
}, 3000);
}
};
new Scroller($('main'), $('box'), $('images'), $('adNav'), 490, 500, 'horizontal', 490, 170);//水平滑动
new Scroller($('main1'), $('box1'), $('images1'), $('adNav1'), 170, 500, 'vertical', 490, 170);//垂直滑动
}
</script>
</body>
</html>
分享到:
相关推荐
国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,国庆中秋节排班表,...
中秋节模板HTML
这是一套手绘赏月主题中秋节PPT模板,共11张。 幻灯片模板封面,使用了手绘的形式,绘制了一个紫砂壶、一盘月饼、一束束菊花作为背景图片。中秋共赏一轮明月,一行艺术字放在中间。 PPT模板内容页面,同样使用了...
这是一份非常精美非常好看的中秋节幻灯片模板,第一PPT模板网在这里祝各位...关键词:优秀PPT模板,好看的中秋节幻灯片模板下载,精美动态PPT动画,卷轴,月亮,月饼PowerPoint背景图片,幻灯片背景音乐,.PPT格式;
关于中秋节的PPT下载,关键词:团圆节幻灯片模板,蓝色PPT背景; 中秋起源 中秋节是远古天象崇拜的象征- -敬月习俗的遗痕.周代已有“中秋夜迎寒”,“中秋夜献裘”,“秋夜夕月”的活动;汉代,又在中秋和立秋...
小学生国庆节中秋节放假安全教育PPT教案.pptx
中秋促销短信大全 中秋节送福利短信 中秋节营销方案参考.doc
这是一套中秋节诗词PPT,共11张。 幻灯片模板使用了金黄色作为背景色,用孔明灯、月饼、嫦娥、古建筑作为背景图片。非常适合用于制作与中秋节相关的PPT; 与中秋节有关的诗词: 中秋节,又称月夕、秋节女儿节或...
开发环境:Microsoft Visual C++ 6.0 用MFC类库写的中秋节祝福程序 MFC
Discuz! 中秋节
中秋节2个模板 花好月圆 中秋节快乐(PS设计师素材 、PSD源文件下载、各图层透明图png).zip
2011年中秋祝福网页代码。...中秋祝福,中秋月饼,中秋节祝福网页,中秋祝福短信展示! 点击此处给亲朋好友送去中秋祝福 <!-- window.open ('http://www.veryhuo.com/jieri/zhongqiu/') -->
1.了解中秋节的由来、习俗,学习有关中秋节的诗 2.在活动中培养学生的探究能力、社会调查能力、动手能力、创新能力和与人交往、合作的能力。 3.通过各种实践活动获得丰富的经验和积极的情感体验,中秋节的习俗很多,...
中秋节贺卡PNG
这是一份精美动态中秋节幻灯片模板。第一PPT提供幻灯片模板免费下载; 在蓝色的幻灯片背景上,卡通的月亮、月兔作为PPT背景图片,翔云等幻灯片元素作为点缀。在幻灯片播放的时候,搭配了适当的PPT动画,为PPT模板...
这是一份带有动态幻灯片效果的,花好月圆人团圆中秋节幻灯片模板,第一PPT提供免费下载; 幻灯片开始时一个月食的动态效果,随后,喜庆的红色背景逐渐铺开。牡丹、花好月圆人团圆艺术字逐渐展露。本模板是一份精美...
庆祝教师节中秋节.pptx
2015年中秋节祝福网页源码,静态HTM格式,无需数据库支持,任何支持静态网页的空间都可以使用。支持浏览者自定义祝福页面,个性化强,站长宣传利器。
中秋节,农历八月十五,我国的传统节日之一,祝愿大家2011中秋节快乐。 该源码是一个单页,可以生成“XX,你妈妈喊你回家吃月饼了”的祝福页面。