English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
この記事では、html5スライダーの具体的なコードは以下に示します。参考にしてください。
1.スライダーのレイアウト：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*デフォルトのスタイルを削除*/
*{
margin: 0;
padding: 0;
}
/*divの設定*/
#outer{
width: 520px;
height: 333px;
/*中央に設定*/
margin: 50px auto;
/*
* 背景色を設定します
*/
background-color: greenyellow;
/*上下内側マージンを設定します*/
padding: 10px 0;
/*親要素に相対位置を有効にします*/
position: relative;
/*オーバーフローされた内容を隠します*/
overflow: hidden;
}
/*ulを設定します*/
#imgList{
/*リストアイテムを削除します*/
list-style: none;
/*ulの幅を設定します*/
width: 2600px;
/*絶対位置を有効にします*/
position: absolute;
/*
* ulのleft値を変更することで画像を切り替えることができます
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*liを設定します*/
li{
/*要素のフロートを設定します*/
float: left;
/*外側マージンを設定します*/
margin: 0 10px;
}
/*ナビゲーションボタンを設定します*/
#nav{
/*絶対位置を有効にします*/
position: absolute;
/*位置を設定します*/
bottom: 20px;
/*
* #outer 幅 520px
*
* #nav 幅 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*aを左フロートに設定します*/
float: left;
/*幅と高さを設定します*/
width: 15px;
height: 15px;
/*背景色を設定します*/
background-color: red;
/*外側マージンを設定します*/
margin: 0 5px;
/*透明度を設定します*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<!--
コンテナとしてのdivを作成
-->
<div id="outer">
<!--画像を保存するためにulを作成-->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<!--ナビゲーションボタンツリーを作成-->
<div id="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
</div>
</div>
</body>
</html>
2.スライダーのロジック：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*デフォルトのスタイルを削除*/
*{
margin: 0;
padding: 0;
}
/*divの設定*/
#outer{
width: 520px;
height: 333px;
/*中央に設定*/
margin: 50px auto;
/*
* 背景色を設定します
*/
background-color: greenyellow;
/*上下内側マージンを設定します*/
padding: 10px 0;
/*親要素に相対位置を有効にします*/
position: relative;
/*オーバーフローされた内容を隠します*/
overflow: hidden;
}
/*ulを設定します*/
#imgList{
/*リストアイテムを削除します*/
list-style: none;
/*ulの幅を設定します*/
width: 2600px;
/*絶対位置を有効にします*/
position: absolute;
/*
* ulのleft値を変更することで画像を切り替えることができます
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*liを設定します*/
li{
/*要素のフロートを設定します*/
float: left;
/*外側マージンを設定します*/
margin: 0 10px;
}
/*ナビゲーションボタンを設定します*/
#nav{
/*絶対位置を有効にします*/
position: absolute;
/*位置を設定します*/
bottom: 20px;
/*
* #outer 幅 520px
*
* #nav 幅 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*aを左フロートに設定します*/
float: left;
/*幅と高さを設定します*/
width: 15px;
height: 15px;
/*背景色を設定します*/
background-color: red;
/*外側マージンを設定します*/
margin: 0 5px;
/*透明度を設定します*/
opacity: 0.5;
filter: alpha(opacity=50);
}
#nav a:hover{
background-color: black;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
//idがimgListのulを取得します
var imgList = document.getElementById("imgList");
//すべての画像タグを取得します
var imgs = document.getElementsByTagName("img");
//ulの幅を設定します
imgList.style.width = 520 * imgs.length + "px";
//ナビゲーションボタンの中央配置を設定します
//idがouterのdivを取得します
var outer = document.getElementById("outer");
//idがnavのdivを取得します
var nav = document.getElementById("nav");
nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";
//現在表示されている画像のインデックスを保存するための変数を作成します。
var index = 0;
//すべてのリンクを取得します
var links = document.getElementsByTagName("a");
//対応するリンクを選択状態に設定します
links[index].style.backgroundColor = "black";
//自動的に画像を切り替えることを開始します
autoChange();
/*
* リンクをクリックして対応する画像に切り替えます
* 1番目のリンクをクリックして1番目の画像に切り替えます
* 2番目のリンクをクリックして2番目の画像に切り替えます
*/
//すべてのリンクにクリック応答関数をバインドします
for(var i=0 ; i<links.length ; i++{
//リンクに属性を追加します
links[i].num = i;
links[i].onclick = function(){
//画像を切り替える際には、自動切り替えの影響を受けないように必要に応じて停止します
clearInterval(autoTimer);
//現在クリックされたリンクのインデックスを取得します
//現在の画像のインデックスを更新します
index = this.num;
//対応する画像に切り替えます
/*
* 画像を切り替えるのは、imgListのleft属性値を変更することです
* 0 0*-520
* 1 1*-520
* 4 4*-520
*/
//imgList.style.left = -520*index + "px";
//遷移効果を設定します
move(imgList , "left" , -520*index , 20 , function(){
//画像の切り替えが完了したら、自動切り替えを開始します
autoChange();
});
setA();
};
}
//自動的に切り替える画像のタイマーを保存する変数を定義します
var autoTimer;
/*
* 画像を自動的に切り替えるための関数を定義します
*/
function autoChange(){
//画像の切り替えを担当するためのタイマーを開始します
autoTimer = setInterval(function(){
//インデックスを増加させます
index++;
//indexの値が合法かどうかを確認します
index = index % imgs.length;
//画像を切り替えます
move(imgList , "left" , -520*index , 20 , function(){
//アニメーションが完了したら、ナビゲーションポイントを切り替えます
setA();
});
,3000);
}
/*
* リンクの選択状態を設定するための関数です
*/
function setA(){
/*
* 最後の画像と最初の画像が同じであるため、表示されている画像が最後の画像の場合、最初のリンクが色を変えるべきです
*/
if(index >= imgs.length - 1{
index = 0;
//最後の画像に切り替わったら、瞬時に最初の画像に切り替えます
imgList.style.left = 0;
}
/*リンクを巡回します*/
for(var i=0 ; i<links.length ; i++{
//すべてのリンクの背景色を赤に設定します
links[i].style.backgroundColor = "";
}
//現在選択されているリンクを黒色に設定
links[index].style.backgroundColor = "black";
}
};
</script>
</head>
<body>
<!--
コンテナとしてのdivを作成
-->
<div id="outer">
<!--画像を保存するためにulを作成-->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
<!--ナビゲーションボタンツリーを作成-->
<div id="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a>
</div>
</div>
</body>
</html>
外部jsコード：
/*
* move()関数を定義し、シンプルなアニメーション効果を実行
* 引数：
* obj アニメーションを実行するオブジェクト
* attr アニメーションを実行する際に変更する属性
* target アニメーションを実行する目標位置
* speed アニメーションの実行速度
* callback コールバック関数、アニメーションが実行された後にこのコールバック関数が実行されます
*/
function move(obj, attr, target, speed, callback) {
//前のタイマーを閉じる
/*
* 通常、タイマーの識別子をアニメーション実行オブジェクトの属性として保存し、これにより、タイマーにアクセスできるのは現在のオブジェクトのみになります
*/
clearInterval(obj.timer);
//左に移動するか右に移動するかを判断
//0 --> 800 なら右に移動
//開始位置 < 目標位置なら右に移動し、速度は正
//800 --> 0 なら左に移動
//開始位置 > 目標位置なら左に移動し、速度は負
//要素の開始位置を取得
var current = parseInt(getStyle(obj, attr));
if(current > target) {
//開始位置 > 目標位置なら左に移動し、速度は負
speed = -speed;
}
//一個タイマーを開始し、boxを制御1移動
obj.timer = setInterval(function() {
//boxを取得します1の現在のleft値
var oldValue = parseInt(getStyle(obj, attr));
//旧値を通じて新しい値を計算します
var newValue = oldValue + speed;
//newValueがspeedよりも大きいかどうかを判断します800
/*
* 0から 800へのアニメーションを実行する場合、値が次第に大きくなります
* 0から800から0へのアニメーションを実行する場合、値が次第に小さくなります
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//box1のleft値を新しい値に変更します
obj.style[attr] = newValue + "px";
//当box1移動先に800pxの位置に達したら、動作を停止します
if(newValue == target) {
clearInterval(obj.timer);
//コールバック関数を呼び出します
callback && callback();
}
, 30);
}
/*
* 任意の要素の現在のスタイルを取得するために使用されます
* 引数：
* obj 获取樣式的元素
* name 获取樣式的名字
*
* 要素のスタイルを読み取るときに、要素にスタイルが設定されていない場合
* 一方、Firefox、Chromeなどのブラウザでは、自動的に要素のスタイル値を計算します
* IEブラウザでは、時には自動的に計算せずにデフォルト値を返します。例えば、幅はautoが返されます
*
*/
function getStyle(obj, name) {
//ブラウザがgetComputedStyleメソッドを持っているかどうかをチェックします
if(window.getComputedStyle) {
//標準のブラウザをサポート
return getComputedStyle(obj, null)[name];
} else {
//IEのみサポート
return obj.currentStyle[name];
}
}
/*
* 要素にclassを追加するために特別に用意された関数を定義します
* 引数：
* obj 要追加のclass属性を持つオブジェクト
* cn 要追加のclassの属性値
*/
function addClass(obj, cn) {
//要素にそのclassがあれば追加しません。ない場合は追加します
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 指定されたclassが要素に含まれているかチェックする関数を作成します
* あればtrueを返します。そうでない場合はfalseを返します。
*/
function hasClass(obj, cn) {
//正規表現を作成します
var reg = new RegExp("\\b" + cn + "\\b");
//チェック結果を返します
return reg.test(obj.className);
}
/*
* 指定された要素からclass値を削除するための方法
*/
function removeClass(obj, cn) {
//このclassを削除するためには、このclassを空文字列に置き換えます
//正規表現を作成します
var reg = new RegExp("\\b" + cn + "\\b", "g";
//objにこのclassが含まれているか判断します
if(reg.test(obj.className)) {
//内容を空文字列に置き換えます
obj.className = obj.className.replace(reg, "");
}
}
/*
* 要素のclassを切り替えるための方法
* 要素にこのclassが存在する場合、削除します
* 要素にこのclassが存在しない場合、追加します
*
*/
function toggleClass(obj, cn) {
//objにcnが含まれているか確認します
if(hasClass(obj, cn)) {
//このclassが存在する場合、削除します
removeClass(obj, cn);
} else {
//このclassが存在しない場合、追加します
addClass(obj, cn);
}
}
注：画像は自分で探してください
これで本文のすべてが終わりました。皆様の学習に役立つことを願っています。また、ナイアラ教程を多くのサポートをお願いします。
声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされています。本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる内容を見つけたら、メールを送信してください：notice#oldtoolbag.com（メール送信時、#を@に変更して報告してください。関連する証拠を提供し、一旦確認ができたら、本サイトは即座に侵害疑いのコンテンツを削除します。）