JQuery 이미지롤링 배너

1. JQuery 이미지롤링 배너1
2. JQuery 이미지롤링 배너2
3. JQuery Coin Slider
4. JQuery 이미지롤링 배너3 - jCarousel
5. JQuery 이미지 확대하기

 

JQuery 이미지롤링 배너1

JQuery 이미지롤링 배너입니다. 

현재 기본 4개의 이미지를 사용하고 있는데,

이미지 추가 제거는 소스의 주석을 보면 됨.

FadeIn/FadeOut 효과 적용된 간단한 배너

images.rar

1.39MB

이미지롤링.html

0.00MB

jquery-1.8.2.js

0.26MB

 

 

JQuery 이미지롤링 배너2

 

jquery.banner.js

0.01MB

jquery_image_slider_2.html

0.00MB

images.rar

1.39MB

 

JQuery Coin Slider

 

적용 예1)

<script type="text/javascript">
 $(document).ready(function() {
  $('#coin-slider').coinslider();
 });
</script>

 

적용 예2) 

<script type="text/javascript">
 $(document).ready(function() {
  $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
 });
</script>

 

옵션 값)
width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover 

 

coin-slider.rar

0.04MB

styles.css

0.00MB

coin-slider-styles.css

0.00MB

jquery-1.9.0.min.js

0.09MB

coin-slider.js

0.01MB

JQueryCoinSlider.html

0.00MB

 

 

 

JQuery 이미지롤링 배너3 - jCarousel

 

JQuery 이미지롤링 플러그인 

http://sorgalla.com/projects/jcarousel/

 

 

jsor-jcarousel-0.2.9-0-g8e3df57.tar.gz

0.11MB

 

 

JQuery 이미지 확대하기

 

JQuery 이미지 확대하기 소스입니다. 

적용이 어렵지 않네요.

fancybox.zip

2.25MB