스르르르륵 계속 자동으로 움직이는 슬라이드!
본문
http://www.songdobeer.com/songdo_html/
위에 홈페이지의 맨 아래있는 슬라이드처럼 하려면 어떻게 해야하나요!!
너무 궁금해요 꼭 해보고싶었던건데 구글에 검색하기에도 애매해서 ㅠㅠ 혹시 아시는분 계실까요?
답변 3
멋있기만 하지 사용자가 저거 보려고 저기만 쳐다보고 있진 않아요. ㅋ
<link rel="stylesheet" href="http://www.songdobeer.com/songdo_html/lib/simplyscroll/simplyscroll.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://www.songdobeer.com/songdo_html/lib/simplyscroll/simplyscroll.min.js"></script>
<script>
$(function() {
$("#scroller").simplyScroll({
pauseOnHover:false
});
});
</script>
<ul id="scroller">
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img1.jpg" alt="" /><p class="txt"><span class="tag">맥주는 항상 옳은 것!</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img5.jpg" alt="" /><p class="txt"><span class="tag">매일_저녁에는_EDM파티와_불꽃놀이</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img7.jpg" alt="" /><p class="txt"><span class="tag">찾아라! 인생맥주</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img6.jpg" alt="" /><p class="txt"><span class="tag">신선한 날씨, 시원한 맥주, 화끈한 축제</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img8.jpg" alt="" /><p class="txt"><span class="tag">송도 세계맥주축제</span><span class="tag">시원한 맥주</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img3.jpg" alt="" /><p class="txt"><span class="tag">송도 세계맥주축제</span><span class="tag">시원한 맥주</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img4.jpg" alt="" /><p class="txt"><span class="tag">송도 세계맥주축제</span><span class="tag">시원한 맥주</span></p></li>
<li><img src="http://www.songdobeer.com/songdo_html/img/main/gallery_img2.jpg" alt="" /><p class="txt"><span class="tag">맥주는 항상 옳은 것!</span><span class="tag">시원한 맥주</span></p></li>
</ul>
신비님 말씀처럼 정말 너무 느려서 내용을 전달을 할려면 사용자가 한참을 저거만 보고 있어야 겠네요, 사용자의 시간을 강제로 뺏어버리는....ㅎㅎ 스크롤 타임, 속도를 조절하면 되는 간단한 거긴한데....
답변을 작성하시기 전에 로그인 해주세요.