首页
所有分类
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 相关文章推荐
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jquery操作select方法汇总
Feb 05 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 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
tabBar(1) feDisplacementMap(1) Apache(17) sortInts(1) Navigator(1) uniapp(4) 数据重复(1) Hudi(1) Flutter(2) element-china-area-data(1)
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
深入浅出讲解：php的socket通信原理
2016/12/03 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
欧舒丹澳洲版：L’OCCITANE
2017/07/17 全球购物
智能旅行箱：Horizn Studios
2018/04/30 全球购物
科长竞聘演讲稿
2014/05/16 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Golang日志包的使用
2022/04/20 Golang
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python