슬라이드 쇼 배경 이미지

데이터베이스에서 반환 된 PHP 배열이 있는데 배열에는 이미지에 대한 경로가 포함되어 있습니다. 내 래퍼 div의 배경을 HTML로 구성하고 싶습니다. 일부 javascript를 추가 할 수 있기를 원합니다. 배열을 순환하고 배열의 다음 이미지를 표시하는 간격을 설정할 수 있습니다. 가능한 한 사용자가 건너 뛸 수 있도록 슬라이더 쇼를 앞으로 건너 뛰고 중지 할 수도 있습니다.슬라이드 쇼 배경 이미지

출처

2010-01-20 Udders

저는 사실 정확히 묻고있는 것을 수행하기 위해 jQuery Cycle plugin을 적용했습니다. 그것은 위대하고 다양한 플러그인입니다.

페이지에 추가 할 배열에서 이미지를 가져옵니다. 플러그인은 이미지를 움켜 잡고 필요없는 것을 숨기고 순환시킵니다.

업데이트 사용자가 앞뒤로 움직이기를 원한다는 것을 알았습니다. 주기도 마찬가지입니다. pager example을 살펴보십시오.

재 : 배경 이미지 코멘트

당신은 조금 창조적해야합니다. 배경 이미지가 희미 해지는 jQuery 플러그인에 대해 잘 모르겠습니다. 그게 가능할 지 모르겠다. (내가보기를 원한다면). 대신에 컨테이너 역할을하는 고정 된 크기의 요소를 절대적으로 배치하고 배경 이미지의 크기와 일치시키고 상대적으로 내부에 배치 된 순환 요소를 보유합니다. 절대적으로 배치 된 다른 요소를 다른 요소 바로 위에 추가하여 페이지 내용을 추가하십시오.

스타일 :

#cycle, #content { 
    position:absolute; 
    top:0; 
    left:50%; 
    width:800px; 
    height:600px; 
    margin-left:-400px; //middle of page 
    z-index:1; 
} 

#content { 
    z-index:100; 
}

자바 스크립트 :

$('#cycle') 
.after('<div id="nav">') //needs some position styling 
.cycle({ 
    fx:  'fade', 
    speed: 'fast', 
    timeout: 0, 
    pager: '#nav' 
});

HTML :

<div id="cycle"> 
    <img src="path/to/image1.jpg" /> 
    <img src="path/to/image2.jpg" /> 
</div> 
<div id="content">Hello World!</div>

출처

2010-01-20 20:52:19 jay

@ sico87에서 투명/불투명도를 해결하기 위해 플러그인을 사용하는 몇 가지 해킹 사례가 있습니다. – jay

배경 이미지의 경우 어떻게 구현 되나요? 이것은 이미지 갤러리를위한 훌륭한 솔루션 인 것 같습니다. 배경 이미지 용으로 구현 했습니까? – Udders

@ sico87, 백그라운드 코드 (배경 이미지가 아닌 ...)를 순환시키는 방법에 대한 몇 가지 예제 코드와 아이디어를 추가했습니다. – jay

우리가 사용하는 jQuery를 크로스 슬라이드 플러그인 -에 http : // www.gruppo4.com/~tobia /cross-slide.shtml 사이트의 icauto.com

IE6 +

출처

2010-01-21 07:24:48

슬라이드 쇼 배경 이미지

답변

관련 문제