免费3D效果左右箭头轮播纯原生js幻灯片特效代码
发布时间：2016-07-08, 10:19:58 分类：HTML | 编辑 off 网址 | 辅助
图集1/1
正文 8661字数 432,957阅读
效果不错的一款js幻灯片特效代码，支持3D立体效果轮播，带左右箭头按钮控制幻灯图播放，支持幻灯图标题，js代码简单易改，比用flash幻灯特效好用得多，自行修改也容易。
html：
<style type="text/css">
/* focus_Box */
#focus_Box{position:relative;width:710px;height:308px;margin:20px auto;}
#focus_Box ul{position:relative;width:710px;height:308px}
#focus_Box li{z-index:0;position:absolute; width:0px;background:#787878;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)}
#focus_Box li img{width:100%;background:url(images/loading.gif) no-repeat center 50%;height:100%;vertical-align:top}
#focus_Box li p{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat;text-indent:8px;color:#fff;}
#focus_Box li p span{display:inline-block;width:70%;height:40px;overflow:hidden;}
#focus_Box .prev,#focus_Box .next{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:131px;}
#focus_Box .prev{background:url(images/btn.png) left bottom no-repeat;left:0px}
#focus_Box .next{background:url(images/btn.png) right bottom no-repeat;right:0px}
#focus_Box .prev:hover{background-position:left top;}
#focus_Box .next:hover{background-position:right top;}
#focus_Box a.imgs-scroll-btn{display:block;position:absolute;z-index:110;top:7px;right:15px;width:51px;height:23px;overflow:hidden;background:url(images/share-btn.png) no-repeat;text-indent:-999px;}
</style>
<script src="images/cool.org.js"></script>
<div id="focus_Box">
<span class="prev"> </span>
<span class="next"> </span>
<ul>
<li><img width="445" height="308" src="images/1.jpg" /></a></li>
<li><img width="445" height="308" src="images/2.jpg" /></a></li>
<li><img width="445" height="308" src="images/3.jpg" /></a></li>
<li><img width="445" height="308" src="images/4.jpg" /></a></li>
<li><img width="445" height="308" src="images/5.jpg" /></a></li>
</ul>
</div>Run code
Cut to clipboard
cool.org.js：
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.prev = this.wrap.getElementsByTagName("span")[0];
this.next = this.wrap.getElementsByTagName("span")[1];
this.timer = 1000;
this.aSort = [];
this.iCenter = 2;
this._doPrev = function () {return _this.doPrev.apply(_this)};
this._doNext = function () {return _this.doNext.apply(_this)};
this.options = [
/*{width:476, height:210, top:40, left:0, zIndex:1},
{width:426, height:250, top:20, left:50, zIndex:2},
{width:654, height:290, top:0, left:150, zIndex:3},
{width:426, height:250, top:20, left:480, zIndex:2},
{width:476, height:210, top:40, left:476, zIndex:1},*/
{width:365, height:252, top:40, left:0, zIndex:1},
{width:405, height:280, top:20, left:60, zIndex:2},
{width:445, height:308, top:0, left:130, zIndex:3},
{width:405, height:280, top:20, left:240, zIndex:2},
{width:366, height:252, top:40, left:345, zIndex:1},
];
for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[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.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());
this.setUp()
},
doImgClick : function ()
{
var _this = this;
for (var i = 0; i < this.aSort.length; i++)
{
this.aSort[i].onclick = function ()
{
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()
}
}
}
},
setUp : function ()
{
var _this = this;
var i = 0;
for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);
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", 100)
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:100})
};
this.aSort[i].onmouseout();
}
else
{
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)
}
};
window.onload = function ()
{
new ZoomPic("focus_Box");
};Run code
Cut to clipboard
代码打包文件下载
3D效果左右箭头轮播的js幻灯片特效代码
（支付宝）给作者钱财以资鼓励 （微信）→
有过 1 条评论 »
<!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> <style> *{ margin:0; padding:0; } div{ width:520px; height:280px; position:relative; background:pink; margin:0 auto; overflow:hidden; } div ul{ width:3640px; position:absolute; left:-520px; } div ul li{ list-style:none; float:left; width:520px; height:280px; font-size:30px; text-align:center; line-height:280px; } .prev ,.next{ width:30px; height:50px; position:absolute; background:rgba(0,0,0,.4); top:115px; } .prev:hover,.next:hover{ background:rgba(0,0,0,.6); } .prev{ left:0; } .next{ right:0; } .prev:after{ content:'<'; color:#fff; line-height:50px; text-align:center; width:100%; height:100%; display:inline-block; } .next:after{ content:'>'; color:#fff; line-height:50px; text-align:center; width:100%; height:100%; display:inline-block; } div ol{ position:absolute; bottom:10px; left:50%; margin-left:-50px; background:rgba(255,255,255,.2); } div ol li{ list-style:none; float:left; color:#fff; width:10px; height:10px; border-radius:100%; background-color:#fff; overflow:hidden; text-indent:10000px; margin:0 5px; cursor:pointer; } .orange{ background-color:orange!important; } </style> </head> <body> <div id="box"> <ul> <li><img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg" /></li> <li><img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg" /></li> <li><img src="https://img.alicdn.com/tfs/TB1Pp2IfDnI8KJjy0FfXXcdoVXa-520-280.png_q90_.webp" /></li> <li><img src="https://img.alicdn.com/simba/img/TB1gWrUXfTM8KJjSZFDSuultXXa.jpg" /></li> <li><img src="https://img.alicdn.com/simba/img/TB10TmIgcnI8KJjSsziSuv8QpXa.jpg" /></li> <li><img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg" /></li> <li><img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg" /></li> </ul> <a class="prev" href="javascript:void(0)"></a> <a class="next"href="javascript:void(0)"></a> <ol> <li class="orange">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html> <script> var ul=document.querySelector("#box ul"); var currentValue=Number(getStyle(ul,"left").replace("px","")); var li =document.querySelectorAll("#box ul li"); var width=Number(getStyle(li[0],"width").replace("px","")); var prev=document.querySelector(".prev"); var next=document.querySelector(".next"); var ol=document.querySelector("#box ol"); var oli=document.querySelectorAll("#box ol li"); function Move(obj){ var _this=this; this.decoration=obj.decoration||null; this.count=0; this.init=function(changeValue){ ul.style.left=changeValue+"px"; }; this.action=function(){ var timer=setInterval(function(){ if(_this.decoration=="left"){ _this.count-=10; currentValue-=10; }else if(_this.decoration=="right"){ _this.count+=10; currentValue+=10; } if(currentValue==0){ currentValue=-width*(li.length-2); } if(currentValue==(li.length-1)*-width){ currentValue=-width; } var index=Math.abs(currentValue/width)-1; if(index>=li.length-(2+1)){ index=parseInt(index); } _this.olmove(Math.ceil(index)); _this.init(currentValue); if(Math.abs(_this.count)==width){ clearInterval(timer); } },1) }; this.olmove=function(index){ for(var j=0;j<oli.length;j++){ oli[j].className=""; } oli[Math.ceil(index)].className="orange"; }; this.olclick=function(){ var arrays=new Array(oli.length); for(var i=0;i<oli.length;i++){ arrays[i]=-(width*(i+1)); (function(i){ oli[i].onclick=function(){ _this.olmove(i); var timer=setInterval(function(){ if(arrays[i]<currentValue){ if(currentValue-arrays[i]>width){ currentValue-=30; }else{ currentValue-=10; } }else if(arrays[i]>currentValue){ if(arrays[i]-currentValue>width){ currentValue+=30; }else{ currentValue+=10; } } if(arrays[i]==currentValue){ clearInterval(timer) } _this.init(currentValue); },1); } }(i)); } }; } function getStyle(element,attr){ if(element.currentstyle){ return element.currentstyle[attr]; }else{ return window.getComputedStyle(element,null)[attr]; } } prev.onclick=function(){ var obj={ decoration:"right", } run(obj) } next.onclick=function(){ var obj={ decoration:"left", } run(obj) } function run(obj){ var move=new Move(obj); move.action(); } var obj={} var move=new Move(obj); move.olclick(); </script>