index.html 页面展示代码

コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > jsチュートリアル > JSスライドショーはスクロールナビゲーションでスムーズにループ・回転可能(自作)_JavaScriptスキル

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

WBOY

リリース： 2016-05-16 17:26:42

オリジナル

1457 人が閲覧しました

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

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

コードをコピーコードは次のとおりです。

< !DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml">

< /LINK>

前

next

三国時代の主要な女性人物の一人。三国時代、彼女は呉国に属し、並外れた才能と美貌を備えた当時の蘇州の美人でした。

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

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

🎜>

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

🎜>

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

🎜>

<ラベル名='numBut' id='2'>
<ラベル名='numBut' id='3'>
<ラベル名=' numBut' id='4'>

;/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 < _this.iCenter) 
{ 
for (var i = 0; i < _this.iCenter - this.インデックス; 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 (この.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.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() 
 // 壊す; 
// } 
// } 

} 
} 
}, 
setUp : function () 
{ 
var _this = this; 
var i = 0; 
for (i = 0; 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]、{不透明度: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 || 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;tif(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.index - _this.iCenter; i ) _this.aSort .push(_this.aSort.shift()); 
// _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; 
} 