Jquery 슬라이더가 제대로 작동하지 않습니까?

난 내가 페이지를로드 할 때 모두 함께 오는 div에 언젠가 후에 완벽하게Jquery 슬라이더가 제대로 작동하지 않습니까?

이 내가

이있는 HTML 코드가 .... 내 코드 시도가하십시오 .PLS 작업 JQuery와 슬라이더를 어떤 방식 으로든이 슬라이더를 페이드 아웃 대신 왼쪽 슬라이더에서 슬라이드로 만들 수 있습니까?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
$("#slideshow > div:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 3000); 
    </script> 
</head> 

<body> 
<style> 
#slider_one_img{ 
    float: left; 
    background-image: url('one.jpg'); 
    width: 84px; 
height: 86px; 
} 
#slider_two_img{ 
float: left; 
background-image: url('two.png'); 
    width: 84px; 
height: 86px; 
} 
#slider_three_img{ 
    float: left; 
    background-image: url('three.jpg'); 
    width: 84px; 
height: 86px; 
} 
#slider_one_text{ 

    width:70%; 
    text-align: left; 
    margin-top: 3%; 
    float: left; 

} 

#slideshow { 
    margin: 68px auto; 
    position: relative; 
    width: 68%; 
    height: 120px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    margin-left: 2%; 
} 

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
} 
</style> 
<div id="slideshow"> 
    <div> 
    <div id="slider_one_text">My first text</div> 
    <div id="slider_one_img"></div> 
    </div> 
    <div> 
     <div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer 
</div> 
    <div id="slider_two_img"></div> 
    </div> 
    <div> 
     <div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div> 
    <div id="slider_three_img"></div> 
    </div> 
</div> 
</body> 
</html>

출처

2014-06-19 user3755198

이 $(document).ready(function(){}) 내부 코드를 감싸 도와주세요. 코드가 제대로 작동합니다. 왼쪽 또는 오른쪽으로 밀어 jQuery Slide Effect을 참조하십시오.

예 :

$(document).ready(function() { 
$("#slideshow > div:gt(0)").hide(); 
setInterval(function() { 
    $('#slideshow > div:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slideshow'); 
}, 3000); 
});

데모 :. http://jsfiddle.net/lotusgodkk/y5C4G/7/이

출처

2014-06-19 06:38:01

날이 슬라이드를 나타내는 3 점을 넣을 수있는 방법이, 그리고 점에 클릭하면 슬라이드를 해당 표시됩니다이 확인 – user3755198

을 확인하자 ??? – user3755198

코드가 잘 작동합니다. 대답은 대답으로 받아들입니다. – user3755198

Jquery 슬라이더가 제대로 작동하지 않습니까?

답변

관련 문제