Я пытаюсь создать слайд-шоу на веб-странице. Я наклеил весь код на всякий случай, когда я что-то пропустил. Я попытался включить библиотеку jquery по ссылке и файлу. Я также пытался включить js-код в html и как отдельный файл, но все равно никаких результатов. Показывая только кнопки и изображения, я удалял дисплей: ни одна деталь в стиле и изображениях не существует.
<!DOCTYPE html>
<html>
<head
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/
1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/
1.10.4/jquery-ui.min.js">
</script>
<script type="text/javascript" src="js\jquery.js">
</script>
<style type="text/css">
.slider{
width: 600px;
height: 350px;
margin: 30px auto;
background-image: url(ajax-loader.gif);
background-position: center;
background-repeat: no-repeat;
}
.slider img{
width: 600px;
height:350px;
display: none;
}
.shadow{
background-image: url(C:\Users\socsci1\Desktop\slider\
images\shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 664px;
height: 144px;
margin: -60px;
}
a{
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #555;
}
a.right {
float: right;
}
a.left {
float: left;
}
</style>
<script type="text/javascript">
function Slider (){
$(".slider#1").show("fade",500);
$(".slider#1").delay(5500).hide("slide",{direction:'left'},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider#"+count).show("slide",{direction: 'right'},500);
$(".slider#1").delay(5500).hide("slide",{direction:'lefty'},500);
if (count == sc) {
count = 1;
}else {
count = count+1;
}
},5000);
}
</script>
</head>
<body onload="Slider();">
<div class ="slider">
<img id="1" src="images/number-1.jpg" border="0" />
<img id="2" src="images/number-2.jpg" border="0" />
<img id="3" src="images/number-3.png" border="0" />
<img id="4" src="images/number-4.jpg" border="0" />
<a href="#" class="left">Previous</a>
<a href="#" class="right">Next</a>
</div>
<div class="shadow"></div>
</body>
</html>
Кажется, вам не хватает места в вашем селекторе, что означает, что вы настроите таргетинг на неправильном уровне.
Чтобы нацелить ребенка родителя на родительский класс, вы используете: $('.parentclass childSelector')
- обратите внимание на пробел - где childSelector
в вашем случае - #1
. Это дает вам $('.slider #1')
.
В вашем случае, и, как указывает msquitieri, вы используете Id
который должен быть уникальным в вашем HTML. Поэтому вы можете найти его непосредственно $ ("# 1"), например. Преимущество использования родительского селектора заключается в том, что он сужает контекст поиска, который вы делаете, что может быть полезно, если у вас будет большой DOM, который будет пройден.
Для вашей проблемы (не видя каких-либо изображений) другие возможности для просмотра:
$(document).ready(function { });
как синтаксис. Это может быть проблемой, если страница отображается до того, как файлы javascript завершили загрузку.Подумайте о создании JSFiddle для нас, разместите изображения и минимальные html, css и js там. Это поможет нам помочь вам и, вероятно, поможет вам снова пройти процесс.