jquery圖像滑塊淡入不工作

我從這個教程建立一個圖像滑塊。 youtube.com jquery圖像滑塊淡入不工作

我無法獲取第一張圖片以褪色我已經查看了幾次代碼，但無法看到我出錯的地方。這裏是我的代碼

HTML

<DOCTYPE html> 
<html> 
<head> 
    <title>Helping Develope | Jquery Slider</title> 
    <link rel="stylesheet" href="css/slider.css" type="text/css"> 
    <meta charset="utf-8"> 
</head> 
<body> 

<div class="wrapper"> 

    <div id='slider'> 
     <img id="1" src="Images/Image1.jpg"> 
     <img id="2" src="Images/Image2.jpg"> 
     <img id="3" src="Images/Image3.png"> 
     <img id="4" src="Images/Image4.png"> 
    </div> 

    <a href="#" class='left'>Previous</a> 
    <a href="#" class='right'>Next</a> 

</div> 

<script src="js/jquery.js"></script> 
<script src="js/slider.js"></script> 

</body> 
</html>

CSS

.wrapper{ 
     width: 600px; 
     margin: 0 auto; 
    } 

    #slider { 
     width:600px; 
     height:400px; 
     overflow:hidden; 
     margin:30px auto; 
    } 
    #slider > img{ 
     width: 600px; 
     height:400px; 
     float:left; 
     display:none; 
    } 

    a { 
     padding:5px 10px; 
     background-color:#F0F0F0; 
     margin-top:30; 
     text-decoration: none; 
     color: red; 

    } 

    a.left{ 
     float:left; 
    } 

    a.right{ 
     float:right; 
    }

的Javascript

var sliderInt=1; 
var sliderNext=2; 

$(document).ready(function(){ 
$("#slider > img#1").fadeIn(300); 
startSlider() 
}); 
function startSlider(){ 
    count = $("#slider > img").size(); 
    loop= setInterval(function(){ 
     if(sliderNext > count) {  
      sliderNext=1; 
      sliderInt=1; 
     }   
     $("#slider>img").fadeOut(300); 
     $("#slider>img#" + sliderNext).fadeIn(300); 
     sliderInt = sliderNext; 
     sliderNext = sliderNext + 1; 
    }, 3000); 
}

來源

2017-01-08 Caleb F

在你的代碼添加}}; insted的的});

var sliderInt=1; 
 
var sliderNext=2; 
 

 
$(document).ready(function(){ 
 
$("#slider > img#1").fadeIn(300); 
 
startSlider() 
 
}); 
 
function startSlider(){ 
 
    \t count = $("#slider > img").length; 
 
    \t loop= setInterval(function(){ 
 
\t \t if(sliderNext > count) { \t 
 
\t \t \t sliderNext=1; 
 
\t \t \t sliderInt=1; 
 
\t \t } \t \t \t 
 
\t \t $("#slider>img").fadeOut(300); 
 
\t \t $("#slider>img#" + sliderNext).fadeIn(300); 
 
\t \t sliderInt = sliderNext; 
 
\t \t sliderNext = sliderNext + 1; 
 
\t }, 3000); 
 
}

.wrapper{ 
 
     width: 600px; 
 
     margin: 0 auto; 
 
    } 
 

 
    #slider { 
 
     width:600px; 
 
     height:400px; 
 
     overflow:hidden; 
 
     margin:30px auto; 
 
    } 
 
    #slider > img{ 
 
     width: 600px; 
 
     height:400px; 
 
     float:left; 
 
     display:none; 
 
    } 
 

 
    a { 
 
     padding:5px 10px; 
 
     background-color:#F0F0F0; 
 
     margin-top:30; 
 
     text-decoration: none; 
 
     color: red; 
 

 
    } 
 

 
    a.left{ 
 
     float:left; 
 
    } 
 

 
    a.right{ 
 
     float:right; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Helping Develope | Jquery Slider</title> 
 
    <link rel="stylesheet" href="css/slider.css" type="text/css"> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body> 
 

 
<div class="wrapper"> 
 

 
    <div id='slider'> 
 
     <img id="1" src="http://placehold.it/600x400g/ff0000"> 
 
     <img id="2" src="http://placehold.it/600x400g/00ff00"> 
 
     <img id="3" src="http://placehold.it/600x400g/0000ff"> 
 
     <img id="4" src="http://placehold.it/600x400g/000000"> 
 
    </div> 
 

 
    <a href="#" class='left'>Previous</a> 
 
    <a href="#" class='right'>Next</a> 
 

 
</div> 
 

 
<script src="js/jquery.js"></script> 
 
<script src="js/slider.js"></script> 
 

 
</body> 
 
</html>

來源

2017-01-08 19:07:08

謝謝，我得到它的工作！ –

檢查我的答案，如果你卡住的地方只是更新問題 –

好的新代碼是 –

這裏的工作片段。你在尋找什麼？

var sliderInt=1, 
 
    sliderNext=2; 
 

 
$(document).ready(function() { 
 
    $("#slider > img#1").fadeIn(300); 
 
})

.wrapper { 
 
     width: 600px; 
 
     margin: 0 auto; 
 
    } 
 

 
    #slider { 
 
     width:600px; 
 
     height:400px; 
 
     overflow:hidden; 
 
     margin:30px auto; 
 
    } 
 
    #slider > img{ 
 
     width: 600px; 
 
     height:400px; 
 
     float:left; 
 
     display:none; 
 
    } 
 

 
    a { 
 
     padding:5px 10px; 
 
     background-color:#F0F0F0; 
 
     margin-top:30; 
 
     text-decoration: none; 
 
     color: red; 
 

 
    } 
 

 
    a.left{ 
 
     float:left; 
 
    } 
 

 
    a.right{ 
 
     float:right; 
 
    }

<DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Helping Develope | Jquery Slider</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body> 
 

 
<div class="wrapper"> 
 

 
    <div id='slider'> 
 
     <img id="1" src="Images/Image1.jpg"> 
 
     <img id="2" src="Images/Image2.jpg"> 
 
     <img id="3" src="Images/Image3.png"> 
 
     <img id="4" src="Images/Image4.png"> 
 
    </div> 
 

 
    <a href="#" class='left'>Previous</a> 
 
    <a href="#" class='right'>Next</a> 
 

 
</div> 
 

 
<script src="js/jquery.js"></script> 
 
<script src="js/slider.js"></script> 
 

 
</body> 
 
</html>

來源

2017-01-08 19:03:32

我跑，你發佈的代碼，仍然無法得到的圖像彈出 –

我想出了問題 –

jquery圖像滑塊淡入不工作

回答

相關問題