Добрый вечер, друзья!
В программировании слабо разбираюсь. В общем, нашел вот тут 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>