slideGallery.js
샘플영상
다운로드
slideGallery.js V1.0 다운로드설치/사용법
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slideGallery.js"></script>
<style>
#gallery .bg
{
overflow:hidden;
}
#gallery .bg img
{
position:relative;
left:0px;
}
#gallery .button
{
background:transparent;
position:absolute;
width:30%;
top:0;
}
#gallery .right
{
right:0;
}
</style>
<script>
$(function(){
$('#gallery img').slideGallery({
'left_area':$('#gallery .left'),
'right_area':$('#gallery .right'),
'speed':5
});
});
</script>
<section id="gallery">
<div class="bg">
<img src="img/gallery.png"> //갤러리에서 동작시킬 이미지를 합친 이미지
<div class="button right"></div>
<div class="button left"></div>
</div>
</section>
1. 제이쿼리 설치가 필요 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slideGallery.js"></script>
<style>
#gallery .bg
{
overflow:hidden;
}
#gallery .bg img
{
position:relative;
left:0px;
}
#gallery .button
{
background:transparent;
position:absolute;
width:30%;
top:0;
}
#gallery .right
{
right:0;
}
</style>
<script>
$(function(){
$('#gallery img').slideGallery({
'left_area':$('#gallery .left'),
'right_area':$('#gallery .right'),
'speed':5
});
});
</script>
<section id="gallery">
<div class="bg">
<img src="img/gallery.png"> //갤러리에서 동작시킬 이미지를 합친 이미지
<div class="button right"></div>
<div class="button left"></div>
</div>
</section>
2. 다운로드 받은 플러그인을 설치 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slideGallery.js"></script>
<style>
#gallery .bg
{
overflow:hidden;
}
#gallery .bg img
{
position:relative;
left:0px;
}
#gallery .button
{
background:transparent;
position:absolute;
width:30%;
top:0;
}
#gallery .right
{
right:0;
}
</style>
<script>
$(function(){
$('#gallery img').slideGallery({
'left_area':$('#gallery .left'),
'right_area':$('#gallery .right'),
'speed':5
});
});
</script>
<section id="gallery">
<div class="bg">
<img src="img/gallery.png"> //갤러리에서 동작시킬 이미지를 합친 이미지
<div class="button right"></div>
<div class="button left"></div>
</div>
</section>
3. html 태그 및 스타일을 작성 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slideGallery.js"></script>
<style>
#gallery .bg
{
overflow:hidden;
}
#gallery .bg img
{
position:relative;
left:0px;
}
#gallery .button
{
background:transparent;
position:absolute;
width:30%;
top:0;
}
#gallery .right
{
right:0;
}
</style>
<script>
$(function(){
$('#gallery img').slideGallery({
'left_area':$('#gallery .left'),
'right_area':$('#gallery .right'),
'speed':5
});
});
</script>
<section id="gallery">
<div class="bg">
<img src="img/gallery.png"> //갤러리에서 동작시킬 이미지를 합친 이미지
<div class="button right"></div>
<div class="button left"></div>
</div>
</section>
4. 페이지 실행시 바로 동작할 수 있도록 함수를 작성 합니다.
$('#gallery img').slideGallery({
'left_area':$('#gallery .left'), //마우스가 위치할 경우 갤러리를 좌측으로 이동 시킬 엘리먼트
'right_area':$('#gallery .right'), //마우스가 위치할 경우 갤러리를 우측으로 이동 시킬 엘리먼트
'speed':5 //이동속도를 정합니다. (추천 속도 = 5)
});
5. 옵션을 설정 합니다.