Не работает слайдер,а я чайник в этом
:help: :help: :help: :help:
Создал слайдер,а он не хочет работать.Как быть? (Сайт создавал для себя) <!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(); ООООООчень извиняюсь за обильное количество кода т.к. я не могу отделить его Если вам все это режет глаз - не ругайтесь.Я еще зеленый:thanks: |
Часовой пояс GMT +3, время: 14:09. |