首页
所有分类
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 开天辟地入门篇一
Dec 09 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
Vue开发Html5微信公众号的步骤
Apr 11 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
ForkJoin(1) 计算器(5) CompletableFuture(1) format(1) 异步回调(1) Springboot-cli(1) JAVA(88) FutureTask(3) 对齐打印(1) 底部导航(1)
You might like
php Ubb代码编辑器函数代码
2012/07/05 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python爬虫之自制英汉字典
2019/06/24 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
潘多拉意大利官方网上商城：网上选购PANDORA珠宝
2018/10/07 全球购物
列车长先进事迹材料
2014/01/25 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
三项教育活动实施方案
2014/03/30 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
房产分割协议书范文
2014/11/21 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书