jqueryで作成する画像スライダー
2020.04.25 /
JavaScriptを使い、カレンダーを作成しました。
「←」「→」ボタンを押下することにより、月を変更することができます。JavaScriptで記載したプログラムを掲載しておきますので、勉強に役立ててください。
jQueryでの画像スライダー
jqueryを使い、簡単な画像スライダーを作成しました。下記にそのスライダーを載せます。
またjqueryで記載したプログラムを掲載しておきます。
jQueryコード
<head>
<style>
#screen{
width:960px;
height:250px;
margin:0 auto;
overflow:hidden;
position:relative;
}
#caroucel{
font-size: 0;
width: 4800px;
position: absolute;
top:0;
left:0px;
}
#caroucel img{
width:960px;
height:250px;
}
#left{
position:absolute;
top:50px;
left:0px;
}
#right{
position: absolute;
top: 50px;
right:100px;
}
</style>
<script src="../jquery_3.3.1.js"></script>
<script>
var imgNum=5;
var imgWidth=960;
var count=101;
$(function(){
var timerId=setInterval("doTimer()",1000);
$("#screen").hover(function(){
clearInterval(timerId);
},function(){
timerId=setInterval("doTimer()",1000);
});
$("#left").click(function(){
count=count-2;
doTimer();
});
$("#right").click(function(){
doTimer();
});
});
function doTimer(){
$("#caroucel").stop().animate({left:-imgWidth*(count%imgNum)+"px"},function(){
count++;
});
}
</script>
</head>
<body>
<div id="screen">
<div id="caroucel">
<img src="../img/画像">
<img src="../img/画像">
<img src="../img/画像">
<img src="../img/画像">
<img src="../img/画像">
</div>
<div id="left"><img src="../img/prev.png"></div>
<div id="right"><img src="../img/next.png"></div>
</div>
</body>
関連記事
