Форум

eddin · #1 (**permalink**) 22.09.2016, 22:57

Добрый вечер, друзья!
В программировании слабо разбираюсь. В общем, нашел вот тут heavenweb.ru/delaem-prostoy-slayder-na-jquery подходящий мне слайдер. Потом чуток изменил его под себя, но когда я выношу js в отдельный файл, то скрипт перестаёт работать. Пожалуйста подскажите как правильно вынести js.

вот такой код у меня получился:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<style>
.HWSlider{
    display:inline-block;margin:0 6px 6px 0;background:red;
    width:515px;
    height:386px;
    overflow: hidden;
    position:relative;
    }
.HWSlider img{
    position:absolute;
    left:0;
    top:0;
    }
#prewbutton, #nextbutton{display:block;position:absolute;top:50%;width:15px;height:23px;overflow:hidden;opacity:0.8;z-index:1;outline:none !important;
    }
#prewbutton{left:10px;background:url(arrowBg.png) 0 50% no-repeat;}
#nextbutton{right:10px;background:url(arrowBg.png) 100% 50% no-repeat;}
#prewbutton:hover, #nextbutton:hover{opacity:1;}
</style>
<script>
 
(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;
 
$(document).ready(function(e) {
    $('.HWSlider img').hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $(".HWSlider img").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.HWSlider img').eq(slideNum).fadeOut(hwSlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.HWSlider img').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        }
if(hwNeedLinks){
    $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>').prependTo('.HWSlider');
    $('#nextbutton').click(function(){
        animSlide("next");
        return false;
        })
    $('#prewbutton').click(function(){
        animSlide("prew");
        return false;
        })
}
    var pause = false;
    var rotator = function(){
            if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
            }
    $('.HWSlider').hover(   
        function(){clearTimeout(slideTime); pause = true;},
        function(){pause = false; rotator();
        });
    rotator();
});
})(jQuery);
 
</script>
    <div class="HWSlider">
        <img src="img/001.jpg" width="515" height="386" alt="">
        <img src="img/002.jpg" width="515" height="386" alt="">
        <img src="img/003.jpg" width="515" height="386" alt="">
        <img src="img/004.jpg" width="515" height="386" alt="">
    </div>
</body>
</html>

Coriolan161 · #2 (**permalink**) 22.09.2016, 23:10

eddin,
30 строка

(function ($) {

35 строка

$(document).ready(function(e) {

Не пихай одно в другое. Кого-то одного оставь. Тем более эти вещи суть одно и тоже

eddin · #3 (**permalink**) 22.09.2016, 23:25

Coriolan161,
я пробовал так сделать, но всё равно не заработало. Вот такой код выносил в файл:

$(function(e) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;
	$('.HWSlider img').hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $(".HWSlider img").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.HWSlider img').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.HWSlider img').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		}
if(hwNeedLinks){
	$('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>').prependTo('.HWSlider');
	$('#nextbutton').click(function(){
		animSlide("next");
		return false;
		})
	$('#prewbutton').click(function(){
		animSlide("prew");
		return false;
		})
}
	var pause = false;
	var rotator = function(){
			if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('.HWSlider').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
})(jQuery);

Но что-то всё равно не пашет...

UPD: А нет, всё работает оказывается... Если просто выношу этот код в файл. А вот если я этот код вставляю в свой JS-файл на сайте, то там он не пашет почему-то...

Coriolan161 · #4 (**permalink**) 22.09.2016, 23:37

eddin,
1) Попробуй локальную jquery вместо cdn

2) вместо size() делай length

slideCount = $(".HWSlider img").size();

3) Убери таймауты.
Сделай сначала рабочую версию с кликами по стрелкам.
Стрелки статичные, без проверки опции нужны или нет.
А потом уже таймауты, и паузы, и тач, и куча других опций.
Короче сделай сначала переключение картинок

4) Ээ....

else {
            slideNum = arrow;
          }

Ты номеру текущего слайда присваиваешь строку "next"/"prev"? Интересно

eddin · #5 (**permalink**) 22.09.2016, 23:47

Coriolan161,
всё заработало без правок. Походу проблема была в кэше. Я его очистил и всё ок стало. Но вам спасибо за участие, сейчас почитаю и возможно size на length поменяю всё же, если более уместно.

Но зато появилась другая маленькая проблема... При загрузке страницы на долю секунды появляется последнее изображение из перечня, а потом уже первое и далее по порядку. Но это уже возможно с помощью вёрстки можно исправить. буду ковырять.

Форум

Справочник

Discord чат

Курсы javascript