首页
所有分类
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 通过name快速取值示例
Jan 24 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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
JOIN(1) Launch Mode(1) 缓冲区(1) NoSQL(1) 弹窗(1) json_extract(1) 变量提升(1) ant design(2) netty(1) form表单(1)
You might like
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php清空（删除）指定目录下的文件，不删除目录文件夹的实现代码
2014/09/04 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
微信小程序-小说阅读小程序实例（demo）
2017/01/12 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Eclipse + Python 的安装与配置流程
2013/03/05 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python实现注册登录系统
2017/08/08 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
pandas如何处理缺失值
2019/07/31 Python
django框架创建应用操作示例
2019/09/26 Python
python中对_init_的理解及实例解析
2019/10/11 Python
英国计算机产品零售商：Novatech（定制个人电脑、笔记本电脑、工作站和服务器）
2018/01/28 全球购物
个人自我鉴定
2013/11/07 职场文书
大学自主招生自荐信
2013/12/16 职场文书
《猫》教学反思
2014/02/26 职场文书
个人课题方案
2014/05/08 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
httpclient调用远程接口的方法
2022/08/14 Java/Android