메인 홈페이지가 있습니다. 그리고 나는 많은 사이트들이 현재 동적으로 몇 개의 커다란 이미지를 동적으로 보여주고있는 곳에서 무엇을하고 싶은가를하고 싶습니다. 특히, 내가 보여주고 싶은 900px, 400px의 5 가지 이미지가 있습니다. 자바 스크립트 setInterval 등으로 할 수 있습니다.하지만 페이드 효과를 추가 할 수있는 방법을 알고 싶습니다. C#으로 코딩하고 있지만 내가 할 수있는 유일한 우아한 방법은 자바 스크립트와 함께하는 것입니다 - 누군가가 나에게 튜토리얼에 대한 링크를 제공하거나 그것을 할 수있는 방식의 코드 스 니펫을 붙여 넣을 수 있다면, 고맙겠습니다. 감사!이미지를 동적으로로드하는 몇 가지 좋은 방법은 무엇입니까?
C#으로 코딩하면 페이드 효과가 나타나지 않으므로 자바 스크립트가 필요합니다. 물론 C#을 사용하여 이미지의 첫 번째 인스턴스를로드 할 수 있지만 효과 나 타이머가있는 객체는 Javascript 또는 jQuery에 있어야합니다. 대부분의 사이트는 실제로이 메인 페이드 인/페이드 아웃 슬라이드 쇼 기능을 위해 jQuery 플러그인을 사용합니다. 밖에는 슬라이더 플러그인이 많이있어 잘 될 것입니다.
당신이 당신 자신의 것을 만들고 싶다고 느끼는 경우, 당신에게 갈 수있는 작은 것이 있습니다.
<img src="img0.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
$(function() {
var i = 0;
// Four-second interval
setInterval(function() {
$("#img").fadeOut(function() {
$(this).attr("src", "img" + i++ % 4 + ".jpg");
$(this).fadeIn();
});
}, 4000);
}
4 초마다 이미지 1에서 4까지 반복되어 페이드 인 및 페이드 아웃됩니다.
또는, 당신은 다음 중 하나처럼 사전 구축 된 jQuery를 슬라이더 플러그인을 다운로드 할 수 있습니다
필요한 것은 jQuery 이미지 카누입니다.
여기에 최고의 링크를 추가하십시오.
1) http://wowslider.com/demo.html : 굉장한 조각을 아주 잘 통합 할 수 있습니다.
2) http://www.jcoverflip.com/
3) http://galleria.io/ : 경이로운
당신은 또한 당신이 더 나은 자신 중 하나를 구현할 수 있도록 jQuery effects에서보고가있을 수 있습니다.
BXSlider jquer를 사용하는 간단한 간단한 라이트급 y 슬라이더.
http://bxslider.com을 참조하십시오.
특징
다양한 슬라이더를 사용해 보았는데이 슬라이더가 훨씬 간단하고 구현하기 쉽다는 것을 알았습니다. (대부분의 두통과 함께 오는 것) –
음의
그는 자바 스크립트에 대해 이야기 한 이래로 jQuery를 대신 사용하도록 제안했습니다. – verisimilitude