div 위로 마우스를 올려 놓으면 슬라이드가있는 Jquery 콘텐츠 슬라이더. jquery Cycle

자, 우리가 여기서 질문을하는 것은 이번이 처음입니다. 지금까지 나는 지난 몇 년간 많은 것을 읽고 배우었습니다.div 위로 마우스를 올려 놓으면 슬라이드가있는 Jquery 콘텐츠 슬라이더. jquery Cycle

내가 콘텐츠 슬라이더 느릅 나무의 autoloops와 페이드를 갖고 싶어 :

어쨌든이 내가 달성하기 위해 노력하고있어 것입니다. 동일한 페이지에서 다른 div에 연결합니다.

그래서 오늘은 다른 jquery (콘텐츠) 슬라이더를 많이 보아 왔습니다. jquery cycle plugin으로 작업하기로 결정했습니다. 이것은 거의 내가 원하는 것처럼 작동합니다.

그러나 웹을 검색 한 후 4 시간이 지난 후에 다른 솔루션을 시도해 본 결과, 나 혼자서이 정보를 찾아 내지 못할 것이라고 생각합니다.

나는 pageranchorbuilder가 붙어 있는데 어떻게하면 제대로 할 수 있습니까? 아니면 여기서 어디로 가야합니까? 내가

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<style type="text/css"> 

#nav { margin: 5px; } 
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none } 
#nav a.activeSlide { background: #ea0 } 
#nav a:focus { outline: none; } 
#slideshow { text-align:left; margin-bottom:100px;} 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.80.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#slideshow').cycle({ 
     fx: 'fade', 
    speed: 2500 , 
     pager:  '#nav', 
     pagerEvent: 'mouseover', 
     allowPagerClickBubble: true, 
     pagerAnchorBuilder: function(i, el) { 
      return '<div style="float:left;height:200px;width:100px;"><a href="' + el.src + '"><img src="http://cloud.github.com/downloads/malsup/cycle/beach'+ (i+1) +'.jpg" width="100" height:"100"/></a></div>'; 
     } 
    }); 
}); 
</script> 
</head> 
<body> 

     <div id="slideshow" class="pics"> 
      <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" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /> 
     </div> 


<div id="nav"></div> 
</body> 
</html>

출처

2012-03-13 needle

내가 콘텐츠 슬라이더 느릅 나무의 autoloops와 페이드를 갖고 싶어 ...이 충분히 명확 바랍니다. 동일한 페이지에서 다른 div에 연결합니다.

정확히 달성하려는 작업에 대해 자세히 설명해 주시겠습니까?

출처

2012-03-13 16:50:20 Sethen

이것이 일어날 까봐 두려웠습니다. 이제는 더 자세히 설명하는 방법이 없습니다. 영어는 제 첫 언어가 아닙니다. 자동 루프 및 페이드 물건을주기 플러그인을 사용하여, 내 예제 코드에서 pageranchorbuilder 다른 div 내가 말하는거야. 그냥 제대로 작동하지 않습니다. – needle

코드를 실행했습니다.

나는 호버 일관

나는 사이클 스크립트

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

의 follwing을 버전을 사용하는 시도가 작동하지 않는 것을보고 지금은 지속적으로 작동 - 당신이 원하는 희망 길을.

jquery주기 데모 페이지에서 사용하는 스크립트를 사용했습니다.

다운로드 페이지에서 jquery.cycle.all.latest.min.js라는 스크립트를 다운로드하려고 시도했지만 작동하지 않으므로 스크립트의 차이점을 잘 모릅니다.

출처

2012-03-30 11:59:25 Nat

고맙습니다. 나는 너의 제안을 시험 할 것이다. – needle

div 위로 마우스를 올려 놓으면 슬라이드가있는 Jquery 콘텐츠 슬라이더. jquery Cycle

답변

관련 문제