いくつかの輪播図の設計原理
13106 ワード
第一の設計構想:各画像の透明度を変更することによって、そのうちのいずれかの画像の透明度を一定の時間ごとに1に設定し、他のものは0に設定し、それによって図の順番に再生する効果を実現する.この考え方は比較的簡単で、まず一組の写真を絶対的に位置させて、重ね合わせさせて、関数を通じて画像の透明度とタイマーを制御することによって、この関数を触発して、異なるピクチャの透明度を変化させます.
/span>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
/* li childID；parentID parentID*/
var autoPlay = function(parentID,childTag){
var pictures = document.getElementById(parentID);
var items = pictures.getElementsByTagName(li);
var len = items.length;
var index = 0;
showItem();
//
function showItem (){
// 0；
hideItems();
items[index].style.opacity = 1;
//
if(index > len - 2){
index = 0;
}{
index++;
}
// setTimeout setInterval
setTimeout(showItem,2500);
}
// 0
function hideItems(){
for(var i =0; i<len; i++){
items[i].style.opacity = 0;
}
}
}
script>
head>
<body>
<ul id="parentID">
<li><img src=""/>li>
<li><img src=""/>li>
<li><img src=""/> li>
<li><img src=""/>li>
<li><img src=""/> li>
ul>
body>
html>/* li childID；parentID parentID*/
var autoSlide = function(parentID,childTag) {
var parent = document.getElementById(parentID);
parent.style.position = "relative";
var items = parent.getElementsByTagName(childTag);
var width = items[0].offsetWidth;
var index = 0;
function slide() {
if (index > items.length - 2) {
index = 0;
} else {
index++;
}
moveWide = -width * index;
parent.style.left = moveWide + "px";
setTimeout(slide, 1500);
}
slide();
}