[jQuery]スライド-KakaoTalk
KakaoTalkスライドの前/次のボタン、ナビゲーション、自動再生機能を使用してみてください.
これは塾評価課で作成した機能で、後でよく使われるかもしれないので、以下のように記録しておきます:)
スライドコンテナの位置基準をどの親に設定するかを検討してください [スライドコンテナ]親に準じて 最後までうろうろしていた部分は、jsが実現されるとナビゲーションのhoverが同時に実行できないことです.これにより、各スライドのサスペンション運転値がクラスonの場合も一緒に実行されるという問題が解決される.(クラスonをjsで現在クリックされているインデックスに移動) コンテナ移動関数と自動実行関数を宣言し、それぞれ実行したいイベントを実現します. 重複する右インデックスもnextIdx関数として宣言されます.
これは塾評価課で作成した機能で、後でよく使われるかもしれないので、以下のように記録しておきます:)
HTML
<body>
<div id="wrap">
<h1 class="text-center">카카오 슬라이드</h1>
<div id="slides">
<a href="#" class="slides-previous">이전버튼</a>
<a href="#" class="slides-next">다음버튼</a>
<ul class="slides-nav">
<li class="on"><a href="#">무료채팅</a></li>
<li><a href="#">보이스톡&페이스톡</a></li>
<li><a href="#">샵 검색</a></li>
<li><a href="#">톡게시판</a></li>
<li><a href="#">오픈채팅</a></li>
<li><a href="#">채널 탭</a></li>
</ul>
<div class="slides-img">
<ul class="slides-container">
<li><a href="#">무료채팅</a></li>
<li><a href="#">보이스톡&페이스톡</a></li>
<li><a href="#">샵 검색</a></li>
<li><a href="#">톡게시판</a></li>
<li><a href="#">오픈채팅</a></li>
<li><a href="#">채널 탭</a></li>
</ul>
</div>
</div>
</div>
</body>CSS
left:0;に配置する必要があります.移動時に最初のスライドは移動しません.top:0;値は、基準点の親がスライド画像のサイズとして指定されているので入れられます.<style>
h1{
color:rgb(117, 117, 117);
}
#slides{
position: relative;
margin: 0 auto;
width: 700px;
height: 528px;
}
/* 이전,다음버튼 */
#slides>a{
display: block;
position: absolute;
top: 280px;
width: 44px;
height: 44px;
text-indent: -9999px;
}
#slides>a:nth-of-type(1){
left: 0;
background-image: url(./../images/img_talk_button.png);
background-position: 0 0;
}
#slides>a:nth-of-type(1):hover{
background-position: -70px 0;
}
#slides>a:nth-of-type(2){
right: 0;
background-image: url(./../images/img_talk_button.png);
background-position: 0 -70px;
}
#slides>a:nth-of-type(2):hover{
background-position: -70px -70px;
}
/* 슬라이드 네비게이션 */
#slides>.slides-nav{
display: flex;
margin: 0 auto;
width: 480px;
}
#slides>.slides-nav>li{
width: 80px;
}
#slides>.slides-nav>li:nth-of-type(1){
background-image: url(./../images/btn_talk.png);
background-position: 0 0;
}
#slides>.slides-nav>li:nth-of-type(1).on,
#slides>.slides-nav>li:nth-of-type(1):hover{background-position:0 -90px;}
#slides>.slides-nav>li:nth-of-type(2){
background-image: url(./../images/btn_talk.png);
background-position: -80px 0;
}
#slides>.slides-nav>li:nth-of-type(2).on,
#slides>.slides-nav>li:nth-of-type(2):hover{background-position:-80px -90px;}
#slides>.slides-nav>li:nth-of-type(3){
background-image: url(./../images/btn_talk.png);
background-position: -160px 0;
}
#slides>.slides-nav>li:nth-of-type(3).on,
#slides>.slides-nav>li:nth-of-type(3):hover{background-position:-160px -90px;}
#slides>.slides-nav>li:nth-of-type(4){
background-image: url(./../images/btn_talk.png);
background-position: -240px 0;
}
#slides>.slides-nav>li:nth-of-type(4).on,
#slides>.slides-nav>li:nth-of-type(4):hover{background-position:-240px -90px;}
#slides>.slides-nav>li:nth-of-type(5){
background-image: url(./../images/btn_talk.png);
background-position: -320px 0;
}
#slides>.slides-nav>li:nth-of-type(5).on,
#slides>.slides-nav>li:nth-of-type(5):hover{background-position:-320px -90px;}
#slides>.slides-nav>li:nth-of-type(6){
background-image: url(./../images/btn_talk.png);
background-position: -400px 0;
}
#slides>.slides-nav>li:nth-of-type(6).on,
#slides>.slides-nav>li:nth-of-type(6):hover{background-position:-400px -90px;}
#slides>.slides-nav>li>a{
display: block;
height: 90px;
text-indent: -9999px;
}
/* 슬라이드 컨테이너 */
#slides>.slides-img{
overflow: hidden;
position: relative;
margin: 30px auto;
width: 478px;
height: 438px;
}
/* left를 0을 주어야 js에서 컨테이너 이동할때 첫번째 슬라이드가 이동하지 않는다! */
#slides>.slides-img>.slides-container{
display: flex;
position: absolute;
left: 0;
top: 0;
width: 2868px;
}
#slides>.slides-img>.slides-container>li{
width: 478px;
}
#slides>.slides-img>.slides-container>li:nth-of-type(1){background-image: url(./../images/img_talk_cont1.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(2){background-image: url(./../images/img_talk_cont2.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(3){background-image: url(./../images/img_talk_cont3.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(4){background-image: url(./../images/img_talk_cont4.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(5){background-image: url(./../images/img_talk_cont5.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(6){background-image: url(./../images/img_talk_cont6.png);}
#slides>.slides-img>.slides-container>li>a{
display: block;
height: 438px;
text-indent: -9999px;
}
</style>jQuery
<script>
$(function(){
const $container = $('#slides>.slides-img>.slides-container');
const $slidesNav = $('#slides>.slides-nav>li>a');
const $btnPrev = $('#slides>a').eq(0);
const $btnNext = $('#slides>a').eq(1);
let nowIdx = 0;
let intervalkey = '';
// 함수선언
function moveFn(){
//활성화
$slidesNav.eq(nowIdx).parent().addClass('on').siblings().removeClass('on');
//이동
$container.stop().animate({
left : -478 * nowIdx
},400,"easeInOutCubic");
}
// 오른쪽방향 인덱스 함수
function nextIdx(){
if(nowIdx<5){
nowIdx++;
}else{
nowIdx=0;
}
}
// 자동실행 함수
function autoPlay(){
intervalkey = setInterval(function(){
nextIdx();
moveFn();
},3000);
}
// 이벤트 구문
$slidesNav.on('click',function(evt){
evt.preventDefault();
nowIdx = $slidesNav.index(this);
moveFn();
});
// 이전버튼
$btnPrev.on('click',function(evt){
evt.preventDefault();
if(nowIdx>0){
nowIdx--;
}else{
nowIdx=5;
}
moveFn();
});
// 다음버튼
$btnNext.on('click',function(evt){
evt.preventDefault();
nextIdx();
moveFn();
});
// 자동실행
$(window).on('load',function(){
clearInterval();
autoPlay();
});
});
</script>Reference
この問題について([jQuery]スライド-KakaoTalk), 我々は、より多くの情報をここで見つけました https://velog.io/@roong-ra/jQuery-슬라이드-카카오톡テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol