Недавно задавал такой вопрос , но решил написать ещё и добавил ещеё один пример.
Не работает код jQuery, консоль браузера не видит тоже , файл подключён , и находится в одной директории , в чём проблема ? Может стоит обновить драйвера ?
Вот код , который я переписал с этого видео урока
https://www.youtube.com/watch?v=u4qJcO5hLdQ&t=294s
HTML
<code>
.<!DOCTYPE html>
<html>
<head>
<title>пробник</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="prev n"><a href="#">Prev</a></div>
<div class="slider">
<div class="img curry">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
<div class="img">5</div>
</div>
<div class="next n"><a href="">Next</a></div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
</code>
jQuery
<code>
$(document).ready(function(){
$('.next').click(function(){
var currentImage = $('.img.curry');
var currentImageIndex = $('.img.curry').index();
var nextImageIndex = currentImageIndex +1;
var nextImage = $('.img').eq(nextImageIndex);
currentImage.fadeOut(1000);
currentImage.removeClass('curry');
if(nextImageIndex == ($('.img:last').index()+1)){
$('.img').eq(0).fadeIn(1000);
$('.img').eq(0).addClass('curry');
} else {
nextImage.fadeIn(1000);
nextImage.addClass('curry');
}
});
$('.prev').click(function(){
var currentImage = $('.img.curry');
var currentImageIndex = $('.img.curry').index();
var prevImageIndex = currentImageIndex - 1;
var prevImage = $('.img').eq(prevImageIndex);
currentImage.fadeOut(1000);
currentImage.removeClass('curry');
prevImage.fadeIn(1000);
prevImage.addClass('curry');
});
});
</code>
CSS
<code>
body{
background: #2f4f;
display: flex;
font-family: Arial;
}
.slider{
width: 500px;
height: 300px;
margin: 100px auto;
position: relative;
top: 0;
left: 0;
right: 0;
}
.img{
text-align: center;
line-height: 300px;
position: absolute;
font-size: 50px;
color: #f5f5;
display: none;
}
.img.curry{
display:block;
}
.img:first-child{
width:500px;
background: #c40a;
}
.img:nth-child(2){
width:500px;
background: #c80a;
}
.img:nth-child(3){
width:500px;
background: #4f9a;
}
.img:nth-child(4){
width:500px;
background: #0ba;
}
.img:nth-child(5){
width:500px;
background: #c0ba;
}
.n{color: #f5cf;}
a{
text-decoration: none;
color: #b7af;
font-size: 20px;
}
a:hover{color:#1ac ;}
.prev{
position: relative;
top: 240px;
left: 400px;
}
.next{
position: relative;
top: 240px;
right: 400px;
}
</code>
Вот копированный код , тоже ничего , что связанное с jQuery кодом не происходит !!!!
HTML
<code>
<!DOCTYPE html>
<html>
<head>
<title>пробник</title>
<link href='css.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='viewport'>
<ul class='slidewrapper' data-current=0>
<li class='slide'>
Slide 1
</li>
<li class='slide second'>
Slide 2
</li>
<li class='slide third'>
Slide 3
</li>
</ul>
</div>
<a href='javascript: void(0)' id='prev_slide' class='arrows'>←</a>
<a href='javascript: void(0)' id='next_slide' class='arrows'>→</a>
<script type="text/javascript" src="jquery-3.2.1.slim.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
</code>
CSS
<code>
.viewport{
width: 300px;
height: 100px;
overflow: hidden;
position: relative;
}
.slidewrapper{
position: absolute;
left: 0;
top: 0;
height: 100px;
margin: 0;
padding: 0;
}
.slide{
width: 300px;
height: 100px;
float: left;
list-style: none;
margin: 0;
padding: 0;
background: #ff0000;
}
.second{
background: #00ff00;
}
.third{
background: #0000ff;
}
</code>
jQuery
<code>
var slideWidth=300;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
sliderTimer=setInterval(nextSlide,1000);
$('.viewport').hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer=setInterval(nextSlide,1000);
});
$('#next_slide').click(function(){
clearInterval(sliderTimer);
nextSlide();
sliderTimer=setInterval(nextSlide,1000);
});
$('#prev_slide').click(function(){
clearInterval(sliderTimer);
prevSlide();
sliderTimer=setInterval(nextSlide,1000);
});
});
function nextSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide++;
if(currentSlide>=$('.slidewrapper').children().size())
{
currentSlide=0;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}
function prevSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide--;
if(currentSlide<0)
{
currentSlide=$('.slidewrapper').children().size()-1;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}
</code>
вот на jsfile ,всё работает!!!
http://jsfiddle.net/FUxWc/
