js圖片自動輪播切換代碼

2024-04-27 15:10:12

字體：大中小

來源：轉載

供稿：網友

<!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=gb2312" /><title>站長特效_js圖片自動輪播切換代碼_站長特效網</title><meta name="keyWords" content="站長,網頁特效,網頁特效代碼,js特效,js腳本,腳本,廣告代碼,zzjs,zzjs.net,www.zzjs.net,站長特效網" /><meta name="description" content="www.zzjs.net,站長特效網，站長必備js特效及廣告代碼。大量高質量js特效，提供高質量廣告代碼下載,盡在站長特效網" /><style>body,div,ul,li{margin:0;padding:0;}ul{list-style-type:none;}body{background:#000;text-align:center;font:12px/20px Arial;}#box_wwwzzjsnet{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;}#box_wwwzzjsnet .list{position:relative;width:490px;height:170px;overflow:hidden;}#box_wwwzzjsnet .list ul{position:absolute;top:0;left:0;}#box_wwwzzjsnet .list li{width:490px;height:170px;overflow:hidden;}#box_wwwzzjsnet .count{position:absolute;right:0;bottom:5px;}#box_wwwzzjsnet .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}#box_wwwzzjsnet .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}#tmp{width:100px;height:100px;background:red;position:absolute;}</style><script type="text/javascript">//獲取IDvar $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};//獲取tagNamevar $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};//自動播放對象var AutoPlay = function (id) {this.initialize(id)};AutoPlay.PRototype = {initialize: function (id){var oThis = this;this.oBox = $(id);this.oUl = $$("ul", this.oBox)[0];this.aImg = $$("img", this.oBox);this.timer = null;this.autoTimer = null;this.iNow = 0;this.creatBtn();this.aBtn = $$("li", this.oCount);this.toggle();this.autoTimer = setInterval(function (){oThis.next()}, 3000);this.oBox.onmouSEOver = function (){clearInterval(oThis.autoTimer)};this.oBox.onmouseout = function (){oThis.autoTimer = setInterval(function (){oThis.next()}, 3000)};for (var i = 0; i < this.aBtn.length; i++){this.aBtn[i].index = i;this.aBtn[i].onmouseover = function (){oThis.iNow = this.index;oThis.toggle()}}},creatBtn: function (){this.oCount = document.createElement("ul");this.oFrag = document.createDocumentFragment();this.oCount.className = "count";for (var i = 0; i < this.aImg.length; i++){var oLi = document.createElement("li");oLi.innerHTML = i + 1;this.oFrag.appendChild(oLi)}this.oCount.appendChild(this.oFrag);this.oBox.appendChild(this.oCount)},toggle: function (){for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";this.aBtn[this.iNow].className = "current";this.doMove(-(this.iNow * this.aImg[0].offsetHeight))},next: function (){this.iNow++;this.iNow == this.aBtn.length && (this.iNow = 0);this.toggle()},doMove: function (iTarget){var oThis = this;clearInterval(oThis.timer);oThis.timer = setInterval(function (){var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px")}, 30)}};window.onload = function (){new AutoPlay("box_wwwzzjsnet");};</script></head><body><div id="box_wwwzzjsnet"> <div class="list"> <ul> <li><img src="/img/20120508wwwzzjsnet_5.jpg" width="490" height="170" /></li> <li><img src="/img/20120508wwwzzjsnet_6.jpg" width="490" height="170" /></li> <li><img src="/img/20120508wwwzzjsnet_7.jpg" width="490" height="170" /></li> <li><img src="/img/20120508wwwzzjsnet_8.jpg" width="490" height="170" /></li> <li><img src="/img/20120508wwwzzjsnet_9.jpg" width="490" height="170" /></li> </ul> </div></div></body></html>http://www.zzjs.net/html/76.html

上一篇：單行固定表頭

下一篇：js+css+html(彈出菜單)