jsスライドケース解析の実装
9300 ワード
jsでスライドの原理解析を実現する
数枚のピクチャはfloat=leftの形式で1文字に並べられ、ピクチャを含むdivのcssをposition:absoluteとして定義される.指定した期間ごとにdivのtop値が変更されます.
300 px 300 pxのボックスで、地下に300 px 900 pxの画像があり、下の画像を左に引くと、スライドの再生が実現します.
具体的なjsコード:
注意すべき点:
#box{
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
ここでidがboxであるdiv属性をposition:relativeとして指定する:このdivのサブdivはposition:absoluteを通過することができる.ではtop leftの値を変更し、移動距離はこの親div、すなわちidがboxのdivである.そうでなければwindowの0 px 0 px位置に基づいて開始します.
ここoverflow:hiddenも肝心で、300 px 300 pxというボックスの中の内容が見えますが、外は見えません.
次の操作はwindowです.setIntervalは、画像が存在するdiv(idはinternal)のtopの値を一定時間ごとに変更し、1枚の画像に従って1枚の画像の上へ移動させる.
ulのliのマウスメッセージ関数の実装.マウスをliに移動すると再生を停止しますwindowclearInteralは停止を実現して、それではwindowを移動します.setInterval再生を再開します.私は以前idがboxのdivマウスメッセージを設定したことがあるので、liのマウスメッセージを設定する必要はありません.これらはすべてこのidがboxのdivの中にあるからです.
ここではサボるために大きな画像を1枚だけ入れて、この大きな画像の中で移動させます.もちろん、いくつかの小さな画像を1文字に並べて移動することができます.原理は同じです.
別のスライドの実装について説明します
もともとこのjsはネット上から探し当てて、するのはとても眩しくて、残念ながら積分してダウンロードする必要があって、やっとソースコードを見ることができて、ブロガーはその機能によって、1つ模写して、機能は基本的に多くなくて、その中にいくつかの細かいバグがあって、しかし修正も比較的に簡単です.その思想は上の方と大同小異で,しかも詳細な注釈がある.
原理:
画像のurlを配列に格納し、現在再生されているスライド位置インデックスに基づいてimg位置配列のあるurlに再生を実現します.スライドのindexは最大6個、配列中url>6個まで表示され、indexインデックス表示の後ろの6個にpreviouseとnextボタンが同時に追加され、位置決めが容易になります.
2つより大きい場所に近い機能が必要な場合,if文を用いて微細に異なる場所を区別し,関数にカプセル化した.jsとjavaは、オブジェクト向けの関連知識を適用できます.
数枚のピクチャはfloat=leftの形式で1文字に並べられ、ピクチャを含むdivのcssをposition:absoluteとして定義される.指定した期間ごとにdivのtop値が変更されます.
300 px 300 pxのボックスで、地下に300 px 900 pxの画像があり、下の画像を左に引くと、スライドの再生が実現します.
具体的なjsコード:
<%@ page language="java" contentType="text/html; charset=utf8"
pageEncoding="utf8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Insert title here</title>
<style type="text/css">
#box{
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
#internal{
position:absolute;
width:300px;
height:300px;
}
#internal img{
float:left;
}
ul{
list-style:none;
position:absolute;
left:150px;
top:240px;
}
ul li{
text-decoration: none;
width:30px;
height:30x;
float:left;
}
</style>
<script type="text/javascript">
var obj;
var obj2;
var falg = 1;
window.onload = function(){
obj2 = document.getElementById("internal");
obj = document.getElementsByTagName("li");
obj[0].style.backgroundColor = "grey";
var obj3 = document.getElementById("box");
var time = window.setInterval("fun();",2000);
obj3.onmouseover = function(){
window.clearInterval(time);
}
obj3.onmouseout = function(){
time = window.setInterval(fun,2000);
}
for(var i = 0; i < obj.length; i++){
obj[i].onmouseover = function(){
fun(this.innerHTML-1);
}
}
}
function fun(value){
if(value!=null){
falg = value;
}
if(falg > 2){
falg = 0;
}
for(var i = 0; i < obj.length; i++){
if(i==falg){
obj[i].style.backgroundColor = "grey";
}else{
obj[i].style.backgroundColor = "#FFFFFF";
}
}
obj2.style.top = falg*(-300)+"px";
falg++;
}
</script>
</head>
<body>
<div id="box">
<div id="internal">
<a><img src="image/3.jpg"/></a>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
注意すべき点:
#box{
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
ここでidがboxであるdiv属性をposition:relativeとして指定する:このdivのサブdivはposition:absoluteを通過することができる.ではtop leftの値を変更し、移動距離はこの親div、すなわちidがboxのdivである.そうでなければwindowの0 px 0 px位置に基づいて開始します.
ここoverflow:hiddenも肝心で、300 px 300 pxというボックスの中の内容が見えますが、外は見えません.
次の操作はwindowです.setIntervalは、画像が存在するdiv(idはinternal)のtopの値を一定時間ごとに変更し、1枚の画像に従って1枚の画像の上へ移動させる.
ulのliのマウスメッセージ関数の実装.マウスをliに移動すると再生を停止しますwindowclearInteralは停止を実現して、それではwindowを移動します.setInterval再生を再開します.私は以前idがboxのdivマウスメッセージを設定したことがあるので、liのマウスメッセージを設定する必要はありません.これらはすべてこのidがboxのdivの中にあるからです.
ここではサボるために大きな画像を1枚だけ入れて、この大きな画像の中で移動させます.もちろん、いくつかの小さな画像を1文字に並べて移動することができます.原理は同じです.
別のスライドの実装について説明します
もともとこのjsはネット上から探し当てて、するのはとても眩しくて、残念ながら積分してダウンロードする必要があって、やっとソースコードを見ることができて、ブロガーはその機能によって、1つ模写して、機能は基本的に多くなくて、その中にいくつかの細かいバグがあって、しかし修正も比較的に簡単です.その思想は上の方と大同小異で,しかも詳細な注釈がある.
原理:
画像のurlを配列に格納し、現在再生されているスライド位置インデックスに基づいてimg位置配列のあるurlに再生を実現します.スライドのindexは最大6個、配列中url>6個まで表示され、indexインデックス表示の後ろの6個にpreviouseとnextボタンが同時に追加され、位置決めが容易になります.
<%@ page language="java" contentType="text/html; charset=utf8"
pageEncoding="utf8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Insert title here</title>
<style type="text/css">
#box{
width:300px;
height:300px;
overflow: hidden;
position:relative;
}
ul{
list-style: none;
position:absolute;
top:240px;
left:0px;
}
li{
width:30px;
height:30px;
float:left;
}
span{
width : 60px;
height: 60px;
position:absolute;
}
span#one{
top :255px;
left:220px;
}
span#two{
top:255px;
left:260px;
}
</style>
<script type="text/javascript">
//define global variable
var img_obj;
var li_obj;
var index=0;
var time;
//store the image url here
var img_paths = ["image/3.jpg","image/4.jpg","image/3.jpg","image/4.jpg","image/3.jpg","image/4.jpg","image/3.jpg"];
window.onload = function(){
img_obj = document.getElementsByTagName("img");
li_obj = document.getElementsByTagName("li");
// initialize the first li information
li_obj[0].style.backgroundColor = "grey";
alert(img_paths[0]);
dealWithBtn();
img_obj[0].src = img_paths[0];
time = window.setInterval(fun,2500);
//deal with message where user trigger
dealWithMsgForBtn();
}
function fun(value){
index++;
if(index > img_paths.length-1){
index = 0;
resetIndex();
}
dealWithBtn();
if(index < 6){
setColorForSpecil();
setImgForSpecil();
}else{
resetIndex();
//setColorForSpecil();
//setImgForSpecil();
}
}
function resetIndex(){
if(index < 6){
for(var i = 0; i < 6; i++){
li_obj[i].innerHTML = i+1;
}
}else{
//calling the function to do with this thing
//let the index display the next one when index
//more than 5
displayNextOrPreIndex();
}
}
function dealWithBtn(){
var btn_one = document.getElementById("btn_one");
var btn_two = document.getElementById("btn_two");
if(index == 0){
btn_two.style.color = "blue";
btn_one.style.color = "grey";
}else if(index == img_paths.length-1){
btn_one.style.color = "blue";
btn_two.style.color = "grey";
}else{
btn_two.style.color = "blue";
btn_one.style.color = "blue";
}
}
function dealWithMsgForBtn(){
var btn_one = document.getElementById("btn_one");
var btn_two = document.getElementById("btn_two");
btn_one.onclick = function(){
//when mouse has clicked ,deal with this message here
displayNextOrPreIndex(--index);
}
btn_two.onclick = function(){
//the same as above;
displayNextOrPreIndex(++index);
}
btn_one.onmouseover = function(){
window.clearInterval(time);
}
btn_one.onmouseout = function(){
time = setInterval(fun,2500);
}
btn_two.onmouseover = function(){
window.clearInterval(time);
}
btn_two.onmouseout = function(){
time = setInterval(fun,2500);
}
}
function displayNextOrPreIndex(value){
if(value!=null){
index = value;
}
if(value < 0){
index = 0;
}
if(value >= img_paths.length){
index = img_paths.length-1;
}
//the value if null or not to be the falg to distinguish
//between btn(button was click) and slide(when the index
//more than 5,slide to display the back of the index value
/**
there are some wrong below when press pre btn if index variable
more than li_obj.length because this function only suit next btn
but here I'll ignore it because it's easy to modify ,how to modify it
please see the function which was be comments
*/
if(value!=null && index > li_obj.length-1 && index < img_paths.length){
for(var i = index,j=5; i >= index-5; i--,j--){
li_obj[j].innerHTML = i+1;
}
/*for(var i = index,j=5; i >= index-5; i--,j--){
li_obj[j].innerHTML = i;
}*/
}else if(value==null){
for(var i = index,j=5; i >= index-5; i--,j--){
li_obj[j].innerHTML = i+1;
}
}else if(value!=null && index < li_obj.length-1){
//a recursive put here purpose: when click pre btn
// and the index variable less than li_obj.length, to reset
// the index from 1 to li_obj.length-1
resetIndex();
}
//set current li background and others
setColorForSpecil();
//set current image
setImgForSpecil();
//set pre and next status
dealWithBtn();
}
function setColorForSpecil(){
for(var k = 0; k < 6; k++){
if(index < 6){
if(k == index){
li_obj[k].style.backgroundColor = "grey";
}else{
li_obj[k].style.backgroundColor = "#FFFFFF";
}
}else{
if(k == 5){
li_obj[5].style.backgroundColor = "grey";
}else{
li_obj[k].style.backgroundColor = "#FFFFFF";
}
}
}
}
function setImgForSpecil(){
img_obj[0].src = img_paths[index];
}
</script>
</head>
<body>
<div id="box">
<div id="internal">
<a><img /></a>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span id="one"><font id="btn_one"> pre </font></span>
<span id="two"><font id="btn_two"> next </font></span>
</div>
</body>
</html>2つより大きい場所に近い機能が必要な場合,if文を用いて微細に異なる場所を区別し,関数にカプセル化した.jsとjavaは、オブジェクト向けの関連知識を適用できます.