1.画像幅の表示位置を使用して、写真を再生します。テクノロジー:.OffsetWidth、abtn [i] .index = i、setinterval()、oul [0] .style.left =、onclick()
2。アレイを使用して、カルーセルに写真を入れます。テクノロジー:SetInterval()。 onclick()はありません
写真Carousel 12js.html
コードコピーは次のとおりです。
<!doctype html public " - // w3c // dtd xhtml 1.0 strict // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = iso-8859-1" />
<title>画像スライド</title>
<style type = "text/css">
* {
マージン:0px;
パディング:0px;
}
li {
リストスタイル:なし;
}
img {
ボーダー:0;
}
{
テキスト装置:なし;
}
#slide {
幅:800px;
高さ:400px;
Box-Shadow:0PX 0PX 5PX#C1C1C1;
マージン:20px Auto;
位置:相対;
オーバーフロー:隠し;
}
#slide ul {
位置:絶対;
左:0px;
上:0px;
高さ:400px;
幅:11930px;
}
#slide ul li {
幅:800px;
高さ:400px;
オーバーフロー:隠し;
フロート:左;
}
#slide .ico {
幅:800px;
高さ:20px;
オーバーフロー:隠し;
テキストアライグ:センター;
位置:絶対;
左:0px;
下:10px;
z-index:1;
}
#slide .ico a {
ディスプレイ:インラインブロック。
幅:10px;
高さ:10px;
背景:url(out.png)繰り返し0px 0px;
マージン:0px 5px;
}
#slide .ico .active {
背景:url(out1.png)繰り返し0px 0px;
}
#btnleft {
幅:60px;
高さ:400px;
左:0px;
上:0px;
背景:url()no-repeat 0px 0px;
位置:絶対;
z-index:2;
}
#btnleft:hover {
背景:url()no-repeat 0px 0px;
}
#btnright {
幅:60px;
高さ:400px;
右:0px;
上:0px;
背景:url()no-repeat 0px 0px;
位置:絶対;
z-index:2;
}
#btnright:hover {
背景:url()no-repeat 0px 0px;
}
</style>
<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");
var baseWidth = ali [0] .OffsetWidth;
// alert(basewidth);
oul [0] .style.width = baseWidth * ali.length + "px";
var inow = 0;
for(var i = 0; i <abtn.length; i ++){
abtn [i] .index = i;
abtn [i] .onclick = function(){
//alert(this.index);
//Alert(TOl.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 timeinterval = 1000;
setInterval(change、timeinterval);
関数変化(){
if(curindex == abtn.length){
curindex = 0;
} それ以外 {
移動(curindex);
curindex += 1;
}
}
関数移動(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.length; n ++){
abtn [n] .classname = "";
}
abtn [index] .classname = "Active";
oul [0] .style.left = -index * baseWidth + "px";
// buffer(oul [0]、{
//左:-index * baseWidth
//}、8)
}
}
</script>
</head>
<body>
<div id = "slide">
<a id = "btnleft" href = "javascript:void(0);" > </a>
<a id = "btnright" href = "javascript:void(0);" > </a>
<! - 次の画像を変更するとき:style = "left: - (n-1)*800px;" - >
<ul>
<li> <img src = "1.jpg" /> < /li>
<li> <img src = "2.jpg" /> < /li>
<li> <img src = "3.jpg" /> < /li>
<li> <img src = "4.jpg" /> < /li>
<li> <img src = "5.jpg" /> < /li>
<li> <img src = "6.jpg" /> < /li>
</ul>
<div id = "ico">
<a href = "javascript:void(0);"> </a>
<a href = "javascript:void(0);"> </a>
<a href = "javascript:void(0);"> </a>
<a href = "javascript:void(0);"> </a>
<a href = "javascript:void(0);"> </a>
<a href = "javascript:void(0);"> </a>
</div>
</div>
</body>
</html>
画像は自動的にplay.htmlです
コードコピーは次のとおりです。
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>画像</title>
<script type = "text/javascript">
var curindex = 0;
var timeinterval = 1000;
var arr = new array();
arr [0] = "1.jpg";
arr [1] = "2.jpg";
arr [2] = "3.jpg";
arr [3] = "4.jpg";
arr [4] = "5.jpg";
arr [5] = "6.jpg";
arr [6] = "7.jpg";
setInterval(changeimg、timeinterval);
function changeimg(){
var obj = document.getElementById( "obj");
if(curindex == arr.length-1){
curindex = 0;
} それ以外 {
curindex += 1;
}
obj.src = arr [curindex];
}
</script>
<! - <スクリプト言語= "JavaScript">
SetInterval(テスト、1000);
var array = new Array();
var index = 0;
var array = new Array( "image/1.jpg"、 "image/2.jpg"、 "image/3.jpg"、 "image/4.jpg"、 "image/5.jpg"、 "image/6.jpg"、 "image/7.jpg"、 "image/8.jpg"、 "image/9.jpg"、 "image/" ");
function test(){
var myimg = document.getElementById( "IMGS");
if(index == array.length-1)
{index = 0; } else {index ++; }
myimg.src = array [index];
}
</script> - >
</head>
<body>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>