首页
所有分类
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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
vue3中的组件间通信
Mar 31 Vue.js
利用javaScript处理常用事件详解
Apr 14 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
Bean(3) 数据类型(8) Hash(1) RabbitMQ(3) 入门基础(1) Geospatial(1) IOC(3) XML(1) Vmware(3) 触发器(3)
You might like
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
js获取url传值的方法
2015/12/18 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
python标准日志模块logging的使用方法
2013/11/01 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
详解python配置虚拟环境
2019/04/08 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python @property装饰器原理解析
2020/01/22 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
专门经营化妆刷的美国彩妆品牌：Sigma Beauty
2017/09/11 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
实习医生自我评价
2013/09/22 职场文书
财务内勤岗位职责
2014/04/17 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
银行贷款收入证明
2014/10/17 职场文书
房屋租房协议书范本
2014/12/04 职场文书
金榜题名主持词
2015/07/02 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
如何撰写促销方案？
2019/07/05 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript