首頁 > web前端 > js教程 > js換圖片效果可進行定時操作_javascript技巧

js換圖片效果可進行定時操作_javascript技巧

WBOY
發布: 2016-05-16 16:45:07
原創
1052 人瀏覽過
複製程式碼 程式碼如下:


字串路徑= request.getContextPath ();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 路徑"/";
%>






我的JSP 'tu.jsp' 起始頁




;


* {
邊距:0px;
內邊距:0px;
}
li {
列表樣式:無;
}
img {
邊框:0;
}
a {
文字裝飾:無;
}
#slide {
寬度:800px;
高度:400px;
盒子陰影:0px 0px 5px #c1c1c1c1;
邊距:20px 自動;
位置:相對;
溢出:隱藏;
}
#slide ul {
位置:絕對;
左:0px;
上:0px;
高度:400px;
寬度:11930px;
}
#slide ul li {
寬度:800px;
高度:400px>;隱藏;
浮動:左;
}
#slide .ico {
寬度:800px;
高度:20px;
溢出:隱藏;
文字對齊:居中;
位置:絕對;
左:0px;
底部:10px;
z 索引:1;
}
#slide .ico a {
顯示:內聯塊;
寬度:10px;
高度:10px;
背景:url(out.png) 無重複0px 0px;
邊距:0px 5px;
}
#slide . ico .active {
背景:url(out1.png) no-repeat 0px 0px;
}
#btnLeft {
寬度:60px;
高度:400px;
寬度:60px;
高度:400px;
左: 0px;
上:0px;
背景:url() 無重複0px 0px;
位置:絕對;
z 索引:2;
}
#btnLeft :hover {tn
背景:url() no-repeat 0px 0px;
}
#btnRight {
寬度:60px;
高度:400px;
右:0px;
高度:400px;
右:0px;
頂部:0x ;
背景:url() 無重複0px 0px;
位置:絕對;
z 索引:2;
}
#btnRight :hover {
背景:url() no no -repeat 0px 0px;
}

樣式>


window.onload = function() {
var oIco = document.getElementById("ico");
var aBtn = oIco.getElementsByTagName("a");
var oSlide = document.getElementById("slide");
var oUlget =Slide. ("ul");
var aLi = oUl[0].getElementsByTagName("li");
var oBtnLeft = document.getElementById("btnLeft");
var oBtnRight = document.getElementBy(ument." btnRight");

var baseWidth = aLi[0].offsetWidth;
//alert(baseWidth);
oUl[0].style.width = baseWidth * aLi.length "px" ;
var iNow = 0;
for(var i=0;iaBtn[i].index = i;
aBtn[i].onclick = function() {
//alert(this.index);
//alert(oUl[0].style.left);
移動(this.index);
//aIco[ this.index].className = "active";
}
}
oBtnLeft.onclick = function() {
iNow ;
//document.title = iNow;
移動(iNow);
}
oBtnRight.onclick = function() {
iNow --;
document.title = iNow;
移動(iNow);
}
}

var curIndex = 0;
var 時間間隔= 1000;
setInterval(改變,時間間隔);
函數change() {
if(curIndex == aBtn.length) {
curIndex =0;
} else {
move(curIndex);
curIndex = 1;
}

}

}

}

}
//document.title = index;
if(index>aLi.length-1) {
index = 0;
iNow = 索引;
}
if(indexindex = aLi.length - 1;
iNow = 索引;
}
for(var n=0;naBtn[n ].className = "";
} aBtn[index].className = "active"; oUl[0].style.left = -index * baseWidth "px"; // buffer(oUl[0],{ // left:-index * baseWidth // },8) } }
腳本>
頭>




    ;














身體>

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板