Форум

Oleg_chainik · #1 (**permalink**) 03.03.2018, 15:24

Создал слайдер,а он не хочет работать.Как быть?
(Сайт создавал для себя)

<!DOCTYPE html>
   <head>
     <meta charset='utf-8'>
     <style>
*{
    margin:0;
    padding:0;
}

body{
    background-image: url(img/background.jpg);
    background-color: darkblue;
}

#main li{
    display: inline;
    color:aquamarine;
    padding: 8px;
    float:left;
    width:19.03%;
    background-color:black;
    font-size: 25px;
    text-align: center;
    border-right:1px solid gray;
}

#chronos{
    background-image: url(img/chronos.png);
    background-size: 320px;
    width:23%;
    height:28px;
    background-position: center;
    margin-left:-5px;
}

#main{
    width:99.7%;
    padding:5px;
}

#slider1{
    width:100%;
}

#wrapper{
    margin-top:-5px;
    width:1670px;
}

#spisok{
    width:22%;
    border:1px solid grey;
    margin-left:1%;
    background-color:lightslategray;
    background-image: url(img/tekstura-fon-chernyy-matovyy.jpg);
    float:left;
    border-radius:10px;
}

#spisok li{
    border-bottom:1px solid gray;
    width:50%;
    margin-left:3%;
    padding:6px;
    padding-left: 7%;
    list-style:none;
    background:url(img/point.png) no-repeat 0px;
    background-size: 20px;
}

#spisok li:last-child{
    border:none;
}

#popular{
    float:left;
    width:75%;
    margin-left:1%;
    background-color:darkorange;
    border-radius:20px;
    border:1px solid grey;
}

#popular h2{
    color:aquamarine;
    text-align:left;
    padding-left:1%;
}

#popular div{
    float:left;
    width:19%;
    height:200px;
    margin-left:1%;
    margin-bottom: 2px;
}

.popimg{
    width:150px;
}

.popname{
    float:left;
}

.buy{
    float:left;
    margin-left:1%;
    width:30%;
    background-color:cornsilk;
}

.compar{
    float:right;
    border:none;
    background:none;
}

span{
    float:left;
    margin-left:2px;
}

.compar img{
    width:28px;
}

h2{
    text-align:center;
}

#main li:hover{
    background-color: darkgrey;
}

#spisok li:hover{
    background-color: darkgray;
}



#popular div:hover{
    background-color:grey;
}

#rekl{
    width:22%;
    margin-left:1%;
    border:1px solid grey;
    position:absolute;
    margin-top:260px;
    background-color:darkorange;
    border-radius:10px;
}

#rekl img{
    width:40%;
}

#rekl div{
    margin-left: 20%;
}

#akcii{
    border:1px solid grey;
    margin-left:1%;
    float:left;
    background:url(img/tekstura-fon-chernyy-matovyy.jpg);
    border-radius:10px;
    width:98%;
    margin-top:1%;
}

#akcii h2{
    color:slategray;
    text-align:left;
    padding-left:3%;
}

#akcii p{
    color:aquamarine;
    padding-left:3%;
}

#akcii a{
    text-decoration:none;
}

#spisok a{
    text-decoration:none;
    color:aquamarine;
}

#akcii p:hover{
    color:crimson;
}

#akcii div{
    float:left;
    margin-left:3%;
}

#container{
    width:1140px;
    height:270px;
    position:absolute;
    overflow:hidden;
    margin-left:16%;
}

#slider{
    position:absolute;
    left:0;
}

.elem{
    width:1140px;
    height:270px;
    position: absolute;
}

#slider_1{
    left:0;
}

#slider_2{
	left:1340px;
}

#slider_3{
	left:2680px;
}

#slider_4{
	left:4020px;
}

#slider_5{
	left:5360px;
}
</style>
     <script src='js/jquery-3.3.1.js'></script>
   </head>

<body>
  <div id='wrapper'>
           
<ul id='main'>
    <a href='main.html'><li id='chronos'></li></a>
    <li>Категории</li>
    <li>О нас</li>
    <li>Галерея</li>
    <li>Корзина</li>
</ul>
      
<div>
    <a href='main.html'><img src='img/slider1.jpg' id='slider1'></a>
</div>

<div id='spisok'>
<ul>
    <li><a href='#'>Фены</a></li>
    <li><a href='#'>Холодильники</a></li>
    <li><a href='#'>Телефоны</a></li>
    <li><a href='#'>Кофемашины</a></li>
    
    <li><a href='#'>Зарядные устройства</a></li>
    <li><a href='#'>Наушники</a></li>
    <li><a href='#'>Павербанки</a></li>
    <li><a href='#'>Чехлы для телефонов</a></li>
    
</ul>
</div>
<!-------------------------------------------------------->
      <div id='popular'>
<h2>Новинки телефонов</h2>
    <!---------------------------------------------------->
          <form>
<div>
<img src='img/mi-note.png' class='popimg'>
<p class='popname'>Xiaomi Mi Note</p>
    <span>- 120 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
    <!---------------------------------------------------->
<div>
<img src='img/431230.jpg' class='popimg'>
<p class='popname'>Lenovo K6 Note</p>
    <span>- 150 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
<!---------------------------------------------------->
<div>
<img src='img/97e438bcb0763afe9cd27e9c8846ce51.jpg' class='popimg'>
<p class='popname'>Nomi i5012 EVO M2 Blue</p>
    <span>- 90 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
    <!---------------------------------------------------->
<div>
<img src='img/000809-huawei-mate-10-lite-black-3_1216ecf5-d801-40fd-8a98-20f3cf3c264c.png' class='popimg'>
<p class='popname'>Huawei Mate 10 Lite Black</p>
    <span>- 139 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
<!---------------------------------------------------->
<div>
<img src='img/mi-note.png' class='popimg'>
<p class='popname'>Xiaomi Mi Note</p>
    <span>- 120 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
    <!---------------------------------------------------->
<div>
<img src='img/mi-note.png' class='popimg'>
<p class='popname'>Xiaomi Mi Note</p>
    <span>- 120 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
          <!------------------------------------------------>
<div>
<img src='img/mi-note.png' class='popimg'>
<p class='popname'>Xiaomi Mi Note</p>
    <span>- 120 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
    <!---------------------------------------------------->
<div>
<img src='img/mi-note.png' class='popimg'>
<p class='popname'>Xiaomi Mi Note</p>
    <span>- 120 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
    <!---------------------------------------------------->
<div>
<img src='img/mi-note.png' class='popimg'>
<p class='popname'>Xiaomi Mi Note</p>
    <span>- 120 $</span>
<br>
    <br>
    <input type='button' value='Купить' class='buy'>
    <button class='compar'><img src='img/WeightIcon.png'></button>
</div>
    <!---------------------------------------------------->
          </form>
  </div>

      <div id='rekl'>
          <div>
              <a href='#'><img src='img/601625.jpg'></a>
<p>Курсы бальных танцев!Спешите!</p>
    <a href='#'>Подробнее...</a>
          </div>
</div>
      
    <div id='akcii'>
        <h2>Акции</h2>
      <div>
        <a href='#'><img src='img/1435.jpg'></a>
          <a href='#'><p>Вперёд за весной!</p></a>
        </div>
        
        <div>
        <a href='#'><img src='img/800.jpg'></a>
            <a href='#'><p>Выгода от магазина Chronos!</p></a>
        </div>
        
        <div>
        <a href='#'><img src='img/1361.jpg'></a>
            <a href='#'><p>Скидка на 2-ой товар Philips!</p></a>
        </div>
      
        <div>
        <a href='#'><img src='img/1452.jpg'></a>
            <a href='#'><p>Телевизоры - скидки до 20%!</p></a>
        </div>
        
        <div>
        <a href='#'><img src='img/1408.jpg'></a>
            <a href='#'><p>Скидки -44% на Rowenta</p></a>
        </div>
        
        <div>
        <a href='#'><img src='img/1418.jpg'></a>
            <a href='#'><p>1000 грн на покупку товаров!</p></a>
        </div>
        
      </div>  
      
<h2>Галерея</h2>
      <div id='container'>
      
      <div id='slider'>
          
      <div class='elem' id='el_1'><a href='#'><img src='img/slider_1.jpg'></a></div>
      <div class='elem' id='el_2'><a href='#'><img src='img/slider_2.jpg'></a></div>
      <div class='elem' id='el_3'><a href='#'><img src='img/slider_3.jpg'></a></div>
      <div class='elem' id='el_4'><a href='#'><img src='img/slider_4.jpg'></a></div>
      <div class='elem' id='el_5'><a href='#'><img src='img/slider_5.jpg'></a></div> 
          
      </div>
      
      </div>
<!--<audio src="music/undertale-au--otel-mtt.mp3" controls autoplay loop></audio>-->
      
</div>
<script src='script.js'>
</script>
</body>
</html>

var begin=1;
var end=5;
var auto=true;
function slider_run(){
	setTimeout(function(){
		if(!auto)return;
		begin++;
		if(begin > end)begin=1;
		$('#slider').animate({left:((begin-1)*1340)+'px'});
	    slider_run();},3000);
}
slider_run();

ООООООчень извиняюсь за обильное количество кода т.к. я не могу отделить его

Если вам все это режет глаз - не ругайтесь.Я еще зеленый

Форум

Справочник

Discord чат

Курсы javascript