JSスライドショーはスクロールナビゲーションでスムーズにループ・回転可能(自作)_JavaScriptスキル

最近、他の人が何かを変更するのを手伝っていましたが、同じものは何もありませんでした。自分で変更して共有しました。

index.html ページ表示コード

コードをコピー コードは次のとおりです。 xmlns="http://www.w3.org/1999/xhtml"> /script> 前 next 三国時代の主要な女性人物の一人。三国時代、彼女は呉国に属し、並外れた才能と美貌を備えた当時の蘇州の美人でした。

> 潘安、西晋時代の作家、本名は潘岳。古代中国で最も有名な美男子であり、「黄金谷二十四友」の一人。

> 明王朝の建国皇帝である朱元璋は、全国に統一封建政権を確立しました。

🎜> 西漢王朝の建国皇帝である劉邦の最初の妻である呂飛は、中国史上初めて権力を握った女性統治者でした。

🎜> 蜀漢王朝の宰相である諸葛孔明は、三国時代の優れた政治家、戦略家、発明家、軍事戦略家でした。

🎜> ;/html>

対応する JS ファイルの内容は次のとおりです:

コードをコピーします

コードは次のとおりです: //var tempi=0; function ZoomPic () { this.initialize.apply(this, argument); } ZoomPic.prototype = { 初期化 : 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 = [ {幅:50, 高さ:212, 上:55, 左:0, zIndex:1}, {幅:90, 高さ:252, 上:35, 左:50, zIndex:2}, {幅:400, 高さ:292, 上:10, 左:140, zIndex:3}, {幅:90, 高さ:252, 上:35, 左:540, zIndex:2}, {幅:50, 高さ:212, 上:55, 左:630, zIndex:1} ]; for (var i = 0; i for (var i = 0; i this.aSort.unshift(this.aSort.pop()); this.setUp(); this.addEvent(this.prev, "クリック", this._doPrev); this.addEvent(this.next, "クリック", 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());//删除数グループの最初の桁を返し、最初の桁を最後に上にプッシュします。 this.setUp() }, doImgClick : function () { var _this = これ; for (var i = 0; i { this.aSort[i].onclick = function () { //alert(this.索引）; if (this.index > _this.iCenter) { for (var i = 0; i _this.setUp() } else if(this.index { for (var i = 0; i _this.setUp() } } } },dospansClick:function(){ var _this = this; for (var i = 0; i { this.aSpan[i].onclick = function () { //alert (この.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.setUp() //alert(this.id '...' cruuNum); if(this.id-cruuNum>0){ for (var i = 0; i _this.setUp() }else{ //if(cruuNum==5){ //if(this.id-cruuNum>0){ for (var i = 0; i _this.setUp(); //}

//} } // else{ // for (var i = 0; i // _this.setUp() // // }

// } // else if(this.id // { // for (var i = 0; i // _this.setUp() // }

// for (var i = 0; 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() // 壊す; // } // }

} } }, setUp : function () { var _this = this; var i = 0; for (i = 0; i for (i = 0; i { this.aSort[i].index = i; //制御浮動层 if (i {

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]、{不透明度: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], "高さ", 0); this.css(this.aSort[i], "top", 37); this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2) } if (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 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)); // } // } } // テンポ ; this.aSort[i].onmouseover = this.aSort[i].onmouseout = null } } },addEvent : function (oElement, sEventType, fnHandler) { oElement.addEventListener を返しますか? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" sEventType, fnHandler) }, css : function (oElement, attr, value) { if (引数) .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 "ピクセル"; 休憩; case "opacity" : oElement.style.filter = "alpha(opacity=" value ")"; oElement.style.opacity = 値 / 100; 休憩; デフォルト: oElement.style[attr] = 値; break } } }, doMove : function (oElement, oAttr, fnCallBack) { var _this = this; clearInterval(oElement.timer); oElement.timer = setInterval(function () { var bStop = true; for (oAttr の var プロパティ) { var iCur = parseFloat(_this.css( oElement, property)); property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100)); var iSpeed = (oAttr[property] - iCur); 🎜>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, argument) } }, 30) },addClick:function (num){ //alert(num); // if (this.index > _this.iCenter) // { // for (var i = 0; i // _this.setUp() // } } }; window.onload = function () { new ZoomPic("box"); }; 関数 tt(){ //alert(1);

}

OK、最後にいくつかの样式上の东西、就可跑起来了;

复制代 代码如下: ボディ { マージン: 0px;パディング: 0px; } div { マージン: 0px;パディング: 0px; } ul { マージン: 0px;パディング: 0px; } li { マージン: 0px;パディング: 0px; } h4 { マージン: 0px;パディング: 0px; } p { マージン: 0px;パディング: 0px; } body { リピートなし 50% 0px rgb(0, 0, 0);フォント: 12px/1.8 arial;色: rgb(255, 255, 255);フォントサイズ調整: なし;フォントストレッチ: 通常; } a { 背景: rgb(102, 102, 102);パディング: 2px 5px;色: rgb(255, 255, 255);テキスト装飾: なし。 } a:hover { 背景: rgb(255, 153, 0); } #box { マージン: 1px auto 0px;幅: 680ピクセル;高さ: 320ピクセル;位置: 相対的; } #box ul { 幅: 680px;高さ: 320ピクセル;位置: 相対的; } #box li { 背景: rgb(0, 0, 0);リストスタイル: なし;境界半径: 3px;ボーダー:0px ソリッド rgb(0, 0, 0);左: 377ピクセル;上: 146ピクセル;幅: 0px;高さ: 0px;オーバーフロー: 非表示;位置: 絶対; z インデックス: 0;カーソル: ポインタ; } #box li div { 背景: rgb(0, 0, 0);幅: 100%;高さ:40ピクセル;下: -100ピクセル;位置: 絶対;不透明度: 0.7; } #box li div h4 { font: 12px/24px arial;マージン: 0px 10px;ボーダーボトムカラー: rgb(51, 51, 51);ボーダーの下の幅: 1px;ボーダーボトムスタイル: ソリッド;フォントサイズ調整: なし;フォントストレッチ: 通常; } #box li div h4 span { 色: 赤;マージン左: 10px; } #box li div p { margin: 5px 10px 0px;テキストインデント: 2em; } .numbutLeft{幅: 15px;高さ: 5px;背景色:#AFB7B6;フロート: 左;カーソル: ポインター;} .numbut{幅: 15px;高さ: 5px;背景色:#AFB7B6;フロート: 左;左マージン: 5px;カーソル: ポインター;} .numbutCen{幅: 15px;高さ: 5px;背景色:#FF0000;フロート: 左;左マージン: 5px;カーソル: ポインター;} .numbutLeftCen{幅: 15px;高さ: 5px;背景色:#FF0000;フロート: 左;カーソル: ポインター;} .numbutdiv{高さ: 10px;幅: 100%;色: 赤;マージントップ: 0px;パディングトップ: 0px} .ndv{高さ: 10px;幅: 95px; margin: 0 auto} #box .next { background-position: -39px 0px;右: -60px; } #copyright { text-align: center;パディングトップ: 10px; } OOOOOKKK 了、奇特な効果が得られ、また不完全な場所があり、変更が得られ、高い手が変更可能ですが、共有が望まれます。 效果如下: