이미지 슬라이드 질문입니다. 채택완료
아직 부족한 단계라 sir에서 많은 분들께 도움을 받고 있습니다. 감사합니다.
한가지 더 질문하고자 합니다.
현재 홈페이지는 아래와 같은 구조로 되어 있습니다.
이미지 슬라이드 4장이 pager에 따라서 돌아가며 컨텐츠 부분은 고정입니다.
</span> </p><p><script type="text/javascript"></p><p><span style="font-size: 11pt; line-height: 1.5;">$(document).ready(function(){</span> </p><p><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;">var opts = $("#visual").cycle({</span> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>fx:'fade',</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>delay:-10000,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>pager:"#visual_page",</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>onPagerEvent: function() { </p><p> opts.timeout = 0</p><p> }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}).data('cycle.opts');</p><p>});<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span style="font-size: 11pt; line-height: 1.5;"></script></span> </p><p> </p><p><div id="woo"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="main_section"><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><!-- 이미지 슬라이드 부분입니다. --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="visual"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="#"><img src="woo1.png"></a></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span style="font-size: 14.6667px; line-height: 1.5;"><a href="#"><img src="woo2.png"></a></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span style="font-size: 14.6667px; line-height: 1.5;"><a href="#"><img src="woo3.png"></a></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span style="font-size: 14.6667px; line-height: 1.5;"><a href="#"><img src="woo4.png"></a></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><!-- Pager 부분입니다. --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="visual_page"></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><!-- 콘텐츠 부분입니다. --></p><p><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;"><ul id="gup_list"></span> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="#" class="list_title"><img src="1.png"></a></p><p><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;"></li></span> </p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><a href="#" class="list_title"><img src="2.png"></a></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;"></li></span></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><a href="#" class="list_title"><img src="3.png"></a></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;"></li></span></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li></p><p style="font-size: 14.6667px;"><span class="Apple-tab-span" style="white-space: pre;"> </span><a href="#" class="list_title"><img src="4.png"></a></p><p><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;"></li></span><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p> </p><p></div></p><p>
여기서 고정이었던 컨텐츠 부분도 4가지로 내용을 추가하여 pager에 따라 변경하고자 합니다.
그림과 같이 가운데 pager에 따라 똑같이 아래위 슬라이드가 작동하는 형식입니다.
다양한 시도들을 해보고 있는데 아직 초보인지라 어려워 여기에 도움을 요청해봅니다.
조언 부탁드립니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인