js画像自動カルーセルコード共有（js画像カルーセル）_javascriptスキル

1. 画像の幅の表示位置を使用して画像を再生します。 テクノロジー: .offsetWidth、aBtn[i].index = i、setInterval()、oUl[0].style.left = 、onclick()
2. 配列を使用して画像をカルーセルに配置します (テクノロジ: setInterval())。 onclick()

はありません

画像カルーセル 12js.html

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd">




< style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
border: 0;
}
a {
text-decoration: none;
}
#slide {
width: 800px;
高さ: 400px;
box-shadow: 0px 0px 5px #c1c1c1;
マージン: 20px auto;
位置: 相対;
オーバーフロー: 非表示;
}
#slide ul {
位置: 絶対;
左: 0px;
上: 0px;
高さ: 400px;
幅: 11930px;
}
#slide ul li {
幅: 800px;
高さ: 400px;
オーバーフロー: 非表示;
float: left;
}
#slide .ico {
幅: 800px;
高さ: 20px;
オーバーフロー: 非表示;
text-align: center;
位置: 絶対;
左: 0px;
下: 10px;
z-index: 1;
}
#slide .ico a {
display: inline-block;
width: 10px;
height:10px;
background: url(out.png) no-repeat 0px 0px ;
margin: 0px 5px;
}
#slide .ico .active {
background: url(out1.png) no-repeat 0px 0px;
}
#btnLeft {
幅: 60px;
高さ: 400px;
左: 0px;
上: 0px;
背景: url() no-repeat 0px 0px;
位置: 絶対;
z-index: 2;
}
#btnLeft :hover {
background: url() no-repeat 0px 0px;
}
#btnRight {
width: 60px ;
高さ: 400px;
右: 0px;
上: 0px;
背景: url() no-repeat 0px 0px;
位置: 絶対;
z-index: 2;
}
#btnRight :hover {
background: url() no-repeat 0px 0px;
}



< ;script type="text/javascript">
window.onload = function() {
var oIco = document.getElementById("ico");
var aBtn = oIco.getElementsByTagName("a" );
var oSlide = document.getElementById("slide");
var oUl = oSlide.getElementsByTagName("ul");
var aLi = oUl[0].getElementsByTagName("li");
var oBtnLeft = document.getElementById("btnLeft");
var oBtnRight = document.getElementById("btnRight");

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

var curIndex = 0;
var timeInterval = 1000;
setInterval(change,timeInterval);
function change() {
if(curIndex == aBtn.length) {
curIndex =0;   
} else {
move(curIndex);
curIndex = 1;
}

}

function move(index) {
//document.title =index;
if(index>aLi.length-1) {
index = 0;
iNow =index;
}
if(index<0) {
index = aLi.length - 1;
iNow = Index;
}
for(var n=0;n aBtn[n].className = ""; 
}
aBtn[index].className = "active";
oUl[0].style.left = -index *baseWidth "px";
//buffer(oUl[0], {
// left: -index *baseWidth
// },8)

}
}

< ;li>

• < ;/li>
  
• 


• 


• 


• < img src="6.jpg" alt="" />

 

< /a>

图片自演播放.html

复制代码代码如下:

<頭>