view source
JavaScript
(function(){
var ele = {};
var width = 960;
var panel = $('.top-slider');
ele.ul = panel.find('ul');
ele.li = panel.find('li');
var index = 0;
var index_max = ele.li.size();
ele.ul.css({width: index_max*width})
var changeImage = function(index){
var left = -index * width;
ele.ul.animate({left : left});
}
var readyNav = function(){
ele.nav_next = $('<div class="next"></div>');
ele.nav_prev = $('<div class="prev"></div>');
panel.append(ele.nav_next).append(ele.nav_prev);
ele.nav_next.click(function(){
index++;
if(index>=index_max){
index = index_max -1;
}
changeImage(index);
});
ele.nav_prev.click(function(){
index--;
if(index<=0){
index = 0;
}
changeImage(index);
});
}
if(panel.size()){
readyNav();
setInterval(function(){
index++;
if(index>=index_max){
index = 0;
}
changeImage(index);
}, 10 * 1000);
}
})();
CSS
/*/////////////////////////////// .top-slider
*/
.top-slider{
position:relative;
left:0px;
top:0px;
width:100%;
height:640px;
overflow:hidden;
}
.top-slider ul{
position:absolute;
left:0px;
top:0px;
}
.top-slider ul:after{
display:block;
content:"";
clear:both;
}
.top-slider ul li{
width:960px;
height:640px;
float:left;
}
.top-slider ul li p{
display:none;
}
.top-slider .prev,
.top-slider .next{
position:absolute;
left:0px;
top:0px;
width:480px;
height:640px;
}
.top-slider .prev{
position:absolute;
left:0px;
top:0px;
}
.top-slider .next{
position:absolute;
left:auto;
right:0px;
top:0px;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-slider/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。