首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

Posted in Javascript onAugust 05, 2013

最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下：
先展示下效果把：
JS幻灯片可循环播放可平滑旋转带滚动导航(自写) 
index.html 页面展示代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<LINK href="css/css.css" rel="stylesheet" type="text/css"> </LINK> 
<SCRIPT language="JavaScript" src="js/16sucai.js"></SCRIPT> 
<script type="text/javascript"> 
</script> 
</head> 
<body> 
<DIV id="box"> 
<PRE class="prev" style="display: none;">prev</PRE> 
<PRE class="next" style="display: none;">next</PRE> 
<UL> 
<LI><IMG name='1' src="images/main_right_p.jpg"> 
<DIV > 
<P>小乔，三国时期的主要女性人物之一。在三国时归属吴国，国色流离、资貌绝伦，是当时有名的东吴美女。</P></DIV></LI> 
<LI><IMG name='2' src="images/main_right_p.jpg"> 
<DIV> 
<P>潘安，西晋文学家，本名潘岳。中国古代最著名的美男子之首、"金谷二十四友"之首。</P></DIV></LI> 
<LI><IMG name='3' src="images/main_right_p.jpg"> 
<DIV> 
<P>朱元璋，明王朝的开国皇帝，建立了全国统一的封建政权。</P></DIV></LI> 
<LI><IMG name='4' src="images/main_right_p.jpg"> 
<DIV > 
<P>吕雉，西汉开国皇帝高祖刘邦的原配夫人，中国历史上第一位掌权的女性统治者。</P></DIV></LI> 
<LI><IMG name='5' src="images/main_right_p.jpg"> 
<DIV > 
<P>诸葛亮，蜀汉丞相，三国时期杰出的政治家、战略家、发明家、军事家。</P></DIV></LI> 
</UL> 
<div class='numbutdiv'> 
<div class='ndv'> 
<label name='numBut' id='0'></label> 
<label name='numBut' id='1'></label> 
<label name='numBut' id='2'></label> 
<label name='numBut' id='3'></label> 
<label name='numBut' id='4'></label> 
</div> 
</div> 
</DIV> 
</body> 
</html>

接下来是对应的JS文件内容: 
//var tempi=0; 
function ZoomPic () 
{ 
this.initialize.apply(this, arguments); 
} 
ZoomPic.prototype = 
{ 
initialize : function (id) 
{ 
var _this = this; 
this.wrap = typeof id === "string" ? document.getElementById(id) : id; 
this.oUl = this.wrap.getElementsByTagName("ul")[0]; 
this.aLi = this.wrap.getElementsByTagName("li"); 
this.spans = this.wrap.getElementsByTagName("label"); 
this.prev = this.wrap.getElementsByTagName("pre")[0]; 
this.next = this.wrap.getElementsByTagName("pre")[1]; 
this.timer = null; 
this.aSort = []; 
this.aSpan = []; 
this.iCenter = 2; 
this._doPrev = function () {return _this.doPrev.apply(_this)}; 
this._doNext = function () {return _this.doNext.apply(_this)}; 
this.options = [ 
{width:50, height:212, top:55, left:0, zIndex:1}, 
{width:90, height:252, top:35, left:50, zIndex:2}, 
{width:400, height:292, top:10, left:140, zIndex:3}, 
{width:90, height:252, top:35, left:540, zIndex:2}, 
{width:50, height:212, top:55, left:630, zIndex:1} 
]; 
for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i]; 
for (var i = 0; i < this.spans.length; i++) this.aSpan[i] = this.spans[i]; 
this.aSort.unshift(this.aSort.pop()); 
this.setUp(); 
this.addEvent(this.prev, "click", this._doPrev); 
this.addEvent(this.next, "click", this._doNext); 
this.doImgClick(); 
this.dospansClick(); 
this.timer = setInterval(function () 
{ 
_this.doNext() 
}, 3000); 
this.wrap.onmouseover = function () 
{ 
clearInterval(_this.timer) 
}; 
this.wrap.onmouseout = function () 
{ 
_this.timer = setInterval(function () 
{ 
_this.doNext() 
}, 3000); 
} 
}, 
doPrev : function () 
{ 
this.aSort.unshift(this.aSort.pop());//删除数组最后一项，并且返回数组 获取最后一位 
this.setUp() 
}, 
doNext : function () 
{ 
this.aSort.push(this.aSort.shift());//删除数组第一项，并且返回数组 删除第一位，然后把第一位push到最后一个上面 
this.setUp() 
}, 
doImgClick : function () 
{ 
var _this = this; 
for (var i = 0; i < this.aSort.length; i++) 
{ 
this.aSort[i].onclick = function () 
{ //alert(this.index); 
if (this.index > _this.iCenter) 
{ 
for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift()); 
_this.setUp() 
} 
else if(this.index < _this.iCenter) 
{ 
for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop()); 
_this.setUp() 
} 
} 
} 
},dospansClick:function(){ 
var _this = this; 
for (var i = 0; i < this.aSpan.length; i++) 
{ 
this.aSpan[i].onclick = function () 
{ 
//alert(this.id); 
//alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name);//获取到当前是第几个在中间 
var cruuNum=_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name; 
// if (this.id > _this.iCenter) 
// { 
// for (var i = 0; i < this.id - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());//取 
// _this.setUp() 
//alert(this.id+'...'+cruuNum); 
if(this.id-cruuNum>0){ 
for (var i = 0; i < this.id-cruuNum; i++) _this.aSort.push(_this.aSort.shift());//取 
_this.setUp() 
}else{ 
//if(cruuNum==5){ 
//if(this.id-cruuNum>0){ 
for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.unshift(_this.aSort.pop());//取 
_this.setUp(); 
//} //} 
} 
// else{ 
// for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.push(_this.aSort.shift());//取 
// _this.setUp() 
// 
// } 


// } 
// else if(this.id < _this.iCenter) 
// { 
// for (var i = 0; i < _this.iCenter - this.id; i++) _this.aSort.unshift(_this.aSort.pop()); 
// _this.setUp() 
// } 
// for (var i = 0; i <5; i++){ 
// _this.aSort.push(_this.aSort.shift());//取第一个 
// alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name+'aaa'+this.id); 
// if(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name==(this.id+1)){ 
// _this.setUp() 
// break; 
// } 
// } 
} 
} 
}, 
setUp : function () 
{ 
var _this = this; 
var i = 0; 
for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);//gebytagui0 
for (i = 0; i < this.aSort.length; i++) 
{ 
this.aSort[i].index = i; 
//控制浮动层 
if (i < 5) 
{ 
this.css(this.aSort[i], "display", "block"); 
this.doMove(this.aSort[i], this.options[i], function () 
{ 
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function () 
{ 
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function () 
{ 
_this.aSort[_this.iCenter].onmouseover = function ()//鼠标放上去 
{ 
_this.doMove(this.getElementsByTagName("div")[0], {bottom:0}) 
}; 
_this.aSort[_this.iCenter].onmouseout = function () 
{ 
_this.doMove(this.getElementsByTagName("div")[0], {bottom:-100}) 
} 
}) 
}) 
}); 
} 
else 
{ 
this.css(this.aSort[i], "display", "none"); 
this.css(this.aSort[i], "width", 0); 
this.css(this.aSort[i], "height", 0); 
this.css(this.aSort[i], "top", 37); 
this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2) 
} 
if (i < this.iCenter || i > this.iCenter)// 
{ 
this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 30) 
this.aSort[i].onmouseover = function () 
{ 
_this.doMove(this.getElementsByTagName("img")[0], {opacity:100}) 
}; 
this.aSort[i].onmouseout = function () 
{ 
_this.doMove(this.getElementsByTagName("img")[0], {opacity:35}) 
}; 
this.aSort[i].onmouseout(); 
} 
else 
{ 
//中间 一直是2 
//alert(this.aSort[i].text);//取消变亮事件 
//alert(this.aSort[i].getElementsByTagName("img")[0].name); 
//变换颜色 
var ttSe=this.aSort[i].getElementsByTagName("img")[0].name; 
var numbuts= document.getElementsByName('numBut'); 
//alert(numbuts.length); 
for(var t=0;t<numbuts.length;t++){ 
if(t==0){ 
if(ttSe==5){ 
numbuts[t].className ='numbutLeftCen'; 
}else 
numbuts[t].className ='numbutLeft'; 
}else if(t==ttSe){ 
numbuts[t].className ='numbutCen'; 
}else if(t==numbuts.length){ 
//alert(t); 
numbuts[0].className ='numbutCen'; 
}else{ 
//全部修改class 
numbuts[t].className='numbut'; 
} 
//var aObj = document.getElementById("a的ID"); 
//添加事件 
//alert(tempi); 
// if(tempi==0){//alert(tempi); 
// if (window.addEventListener) {//Mozilla系列 
// numbuts[t].addEventListener('click', _this.addClick(t+1), false); 
// } else if (window.attachEvent) {//IE 
// numbuts[t].attachEvent('onclick', this.addClick(t+1)); 
// } 
// } 
} 
//tempi++; 
this.aSort[i].onmouseover = this.aSort[i].onmouseout = null 
} 
} 
},addEvent : function (oElement, sEventType, fnHandler) 
{ 
return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler) 
}, 
css : function (oElement, attr, value) 
{ 
if (arguments.length == 2) 
{ 
return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr] 
} 
else if (arguments.length == 3) 
{ 
switch (attr) 
{ 
case "width": 
case "height": 
case "top": 
case "left": 
case "bottom": 
oElement.style[attr] = value + "px"; 
break; 
case "opacity" : 
oElement.style.filter = "alpha(opacity=" + value + ")"; 
oElement.style.opacity = value / 100; 
break; 
default : 
oElement.style[attr] = value; 
break 
} 
} 
}, 
doMove : function (oElement, oAttr, fnCallBack) 
{ 
var _this = this; 
clearInterval(oElement.timer); 
oElement.timer = setInterval(function () 
{ 
var bStop = true; 
for (var property in oAttr) 
{ 
var iCur = parseFloat(_this.css(oElement, property)); 
property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100)); 
var iSpeed = (oAttr[property] - iCur) / 5; 
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 
if (iCur != oAttr[property]) 
{ 
bStop = false; 
_this.css(oElement, property, iCur + iSpeed) 
} 
} 
if (bStop) 
{ 
clearInterval(oElement.timer); 
fnCallBack && fnCallBack.apply(_this, arguments) 
} 
}, 30) 
},addClick:function (num){ 
//alert(num); 
// if (this.index > _this.iCenter) 
// { 
// for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift()); 
// _this.setUp() 
// } 
} 
}; 
window.onload = function () 
{ 
new ZoomPic("box"); 
}; 
function tt(){ 
//alert(1); 
}

OK，最后加上一些样式上的东西,就可以跑起来了； 
body { 
margin: 0px; padding: 0px; 
} 
div { 
margin: 0px; padding: 0px; 
} 
ul { 
margin: 0px; padding: 0px; 
} 
li { 
margin: 0px; padding: 0px; 
} 
h4 { 
margin: 0px; padding: 0px; 
} 
p { 
margin: 0px; padding: 0px; 
} 
body { 
no-repeat 50% 0px rgb(0, 0, 0); font: 12px/1.8 arial; color: rgb(255, 255, 255); font-size-adjust: none; font-stretch: normal; 
} 
a { 
background: rgb(102, 102, 102); padding: 2px 5px; color: rgb(255, 255, 255); text-decoration: none; 
} 
a:hover { 
background: rgb(255, 153, 0); 
} 
#box { 
margin: 1px auto 0px; width: 680px; height: 320px; position: relative; 
} 
#box ul { 
width: 680px; height: 320px; position: relative; 
} 
#box li { 
background: rgb(0, 0, 0); list-style: none; border-radius: 3px; border:0px solid rgb(0, 0, 0); left: 377px; top: 146px; width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 0; cursor: pointer; 
} 
#box li div { 
background: rgb(0, 0, 0); width: 100%; height:40px; bottom: -100px; position: absolute; opacity: 0.7; 
} 
#box li div h4 { 
font: 12px/24px arial; margin: 0px 10px; border-bottom-color: rgb(51, 51, 51); border-bottom-width: 1px; border-bottom-style: solid; font-size-adjust: none; font-stretch: normal; 
} 
#box li div h4 span { 
color: red; margin-left: 10px; 
} 
#box li div p { 
margin: 5px 10px 0px; text-indent: 2em; 
} 
.numbutLeft{width: 15px; height: 5px; background-color:#AFB7B6; float: left; cursor: pointer;} 
.numbut{width: 15px; height: 5px; background-color:#AFB7B6; float: left; margin-left: 5px; cursor: pointer;} 
.numbutCen{width: 15px; height: 5px; background-color:#FF0000; float: left; margin-left: 5px; cursor: pointer;} 
.numbutLeftCen{width: 15px; height: 5px; background-color:#FF0000; float: left; cursor: pointer;} 
.numbutdiv{height: 10px;width: 100%;color: red;margin-top: 0px; padding-top: 0px} 
.ndv{height: 10px;width: 95px; margin: 0 auto} 
#box .next { 
background-position: -39px 0px; right: -60px; 
} 
#copyright { 
text-align: center; padding-top: 10px; 
}

OOOOOKKK 了,奇特的效果就要出来了 ,还有一些不完美的地方,懒得去改了,有高手可以改改看,但希望分享哦。
效果如下:
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
最简单的tab切换实例代码
May 13 Javascript
js和jquery中获取非行间样式
May 05 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
微信小程序实现留言功能
Oct 31 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 #Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 #Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 #Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 #Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 #Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 #Javascript
javascript显示用户停留时间的简单实例
Aug 05 #Javascript
有序排列(1) python-pcl(1) 公共键(1) html标准库(1) 遍历文件夹(1) key(1) pycryto(1) 历史记录(1) 数据加密(1) Anaconda(2)
You might like
php 页面执行时间计算代码
2008/12/04 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
浅析Jquery操作select
2016/12/13 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
运动会通讯稿150字
2014/02/15 职场文书
致800米运动员广播稿
2014/02/16 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
git中cherry-pick命令的使用教程
2022/06/25 Servers
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers