ホームページ > ウェブフロントエンド > jsチュートリアル > js画像自動カルーセルコード共有(js画像カルーセル)_javascriptスキル

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

WBOY
リリース: 2016-05-16 16:49:36
オリジナル
1529 人が閲覧しました

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="" />






图片自演播放.html

复制代码代码如下:



<頭>

画像








ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート