1. 홈
  2. 질의 응답
  3. jquery 자동 스크롤러

jquery 자동 스크롤러

2010-04-16 2 views

답변

0 
<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Example Slideshow</title> 
<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> 

<!-- initialize the slideshow when the DOM is ready --> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 
</head> 
<body> 
    <div class="slideshow"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html>

제가 원하는 것입니다.하지만 이미지 대신 태그를 사용하고 싶습니다 ... 작동하도록 수정 할 수 있습니까?

출처

2010-04-16 22:11:48 vick

+0

예, 내 수정 답을 자동으로 수행 할 http://demo.webdesignbooth.com/content-slider/. –

1

, 당신은 아마 다음 플러그인주기를 원하는 : http://jquery.malsup.com/cycle/

네, 그것은 것입니다 이미지가 아닌 모든 태그로 작업하십시오. 여러 <div> 태그를 순환하고 싶은 경우에 당신은과 같이 뭔가를 할 수 :

<div class="slideshow"> 
    <div>Test 1</div> 
    <div>Test 2</div> 
    <div>Test 3</div> 
</div>

그것은 것 슬라이드 쇼 클래스 내의 태그를 통해주기.

출처

2010-04-16 22:05:31

0 
var scrolling = window.setInterval("autoScroll()", 5000); 

function autoScroll(elem) { 

    $(function() { 
     $('div#mycontainer').animate({ scrollTop: '+=' + 40 }); 
    }); 

}

출처

2010-04-17 04:01:28 XGreen

관련 문제

 관련 문제