htmlのカルーセル

CSS：

<スタイルタイプ= " テキスト/ cssの">
	* {パディング：0。マージン：0; リストスタイル：なし。ボーダー：0;}
	本体{背景色：＃262626。}
	.ALL {幅：500pxなど。高さ：200pxの。パディング：7px; 国境：1pxの固体＃2D2D2D。マージン：100pxに自動; 位置：相対; }
	。画面{
	幅：500pxなど。
	高さ：200pxの。
	オーバーフロー：隠されました;
	位置：相対;
	}
	.screenリー{幅：500pxなど。高さ：200pxの。オーバーフロー：隠されました; フロート：左;}
	.screen UL {位置：絶対。左：0; トップ：0PX。幅：3000px;}
	.ALLオール{位置：絶対。右：10pxの; 下：10pxの; 行の高さ：20ピクセル; テキスト整列：センター;}
	.ALLオール李{フロート：左; 幅：15ピクセル; 高さ：15ピクセル; 背景：#FFF; 余白左：5pxの; カーソル：ポインタ; フォントサイズ：10pxの; フォントファミリ：MS Pゴシック; 行の高さ：15ピクセル; 国境半径：15ピクセル; }
	.ALLオールli.current {背景：黄色;}
	</スタイル>

 

 

JS

<スクリプトタイプ= " テキスト/ javascriptの">
	window.onload =関数（）{
	VARボックス=のdocument.getElementById（ "すべて"）; //取得する大きな箱
	VAR UL = box.children [0] .children [0]。//获取UL
	VAR ulLis = ul.children、すべての内部李// UL
	//レビュー：cloneNodeを（）最終面Bにクローンノードa.appendChild（B）を追加
	// 1 UlLis [0] .cloneNode（真）クローンノード
	ul.appendChild（ulLis [0] .cloneNode（真））。ulLis [0] .cloneNode（真）是のB是// UL
	2 //挿入内部のliオール
	VARオール= box.children [1]; //取得オール
	//私たちは内部の番号オール李を作成したいので、ああそうforループを使用する必要があります
	ため（VAR I = 0; iが<ulLis.length-1; I ++）{//長li減算1内部UL我々はクローン化されたため
	//ノード李を作成します。
	VAR李=のdocument.createElement（ "李"）;
	li.innerHTMLは=私は+ 1; //プラス1人の関係が存在します
	// a.appendChild（B）。
	ol.appendChild（LI）。
	}
	VAR olLis = ol.children; //李オール内側見つけます
	olLis [0] .className = '現在の';
	小型のliオールを横断// 3.アニメーションのセクション
	{（; iはolLis.lengthを<I ++がVAR I = 0）のための
	olLis[i].index = i; // 赋予索引号
	olLis[i].onmouseover = function() {
	// 清除所有人
	for(var j=0;j<olLis.length;j++) {
	olLis[j].className = "";
	}
	this.className = 'current';
	animate(ul,-this.index*ulLis[0].offsetWidth);
	key = square = this.index; // 鼠标经过 key square 要等于 当前的索引号
	}
	}
	// 4. 定时器部分 难点
	var timer = null; // 定时器
	var key = 0; // 用来控制图片的播放的
	var square = 0; // 用来控制小方块的
	timer = setInterval(autoplay,3000); // 每隔3s 调用一次 autoplay
	function autoplay() {
	key++; // key == 1 先 ++
	console.log(key); // 不能超过5
	if(key > ulLis.length - 1)
	{
	// alert('停下');
	ul.style.left = 0;
	key = 1; // 因为第6张就是第一张，我们已经播放完毕了， 下一次播放第2张
	// 第2张的索引号是1
	}
	animate(ul,-key*ulLis[0].offsetWidth);
	// 小方块的做法
	square++; // 小方块自加1
	square = square>olLis.length-1 ? 0 : square;
	/// 清除所有人
	for(var i=0;i<olLis.length;i++) {
	olLis[i].className = "";
	}
	olLis[square].className = "current"; // 留下当前自己的
	}
	// 鼠标经过和停止定时器
	box.onmouseover = function() {
	clearInterval(timer);
	}
	box.onmouseout = function() {
	timer = setInterval(autoplay,3000); // 一定这么开
	}
	// 基本封装
	function animate(obj,target) {
	clearInterval(obj.timer); // 要开启定时器，先清除以前定时器
	// 有2个参数 第一个 对象谁做动画 第二 距离 到哪里
	// 如果 offsetLeft 大于了 target 目标位置就应该反方向
	var speed = obj.offsetLeft < target ? 15 : -15;
	obj.timer = setInterval(function() {
	var result = target - obj.offsetLeft; // 他们的值 等于 0 说明完全相等
	// 动画的原理
	obj.style.left = obj.offsetLeft + speed + "px";
	if(Math.abs(result) <= 15) {
	obj.style.left = target + "px"; //抖动问题
	clearInterval(obj.timer);
	}
	},10);
	}
	}
	</script>

 

html

<div class="all" id='all'>
	<div class="screen">
	<ul>
	<li><img src="images/1.jpg" width="500" height="200" /></li>
	<li><img src="images/2.jpg" width="500" height="200" /></li>
	<li><img src="images/3.jpg" width="500" height="200" /></li>
	<li><img src="images/4.jpg" width="500" height="200" /></li>
	<li><img src="images/5.jpg" width="500" height="200" /></li>
	</ul>
	</div>
	<ol>
	</ol>
	</div>