Всем привет. Собственно начал с азов, нужно просто подключить слайдер к сайту. Делаю вроде всё правильно а не фурычит =(
В main прописал: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Картинки и запчасти засунул как указано в коде это: Шаблон\resources и Шаблон\images
В коде, css стили и js скрипт засунул всё в тпл и подключил командой но толку 0. Что делаю не так?
Он работает но без стилей... просто висят картинки в разные стороны и перелистываются...
На компе всё работает в демо а на сайт запилить не могу.
Вот Код:
<!DOCTYPE HTML>
<html>
<head>
<title>Slider en CSS3 et JS</title>
<style>
*{
padding:0;
margin:0;
list-style-type:none;
}
#slider{
background:url('resources/background.png');
width:960px;
height:370px;
margin:50px auto;
position:relative;
}
#mask{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.fleche{
position:absolute;
top:145px;
cursor:pointer;
}
#fleche_gauche{
left:-17px;
}
#fleche_droite{
right: -17px;
}
#image_container{
position:absolute;
width:400%;
height:100%;
/* La transition sur tout les navigateurs */
/* Chrome */
-webkit-transition-property:all;
-webkit-transition-duration:1s;
/* Firefox */
-moz-transition-property:all;
-moz-transition-duration:1s;
/* Opera */
transition-property:all;
transition-duration:1s;
}
/* Les différentes positions du slider */
.image1 #image_container{
left:0;
}
.image2 #image_container{
left:-100%;
}
.image3 #image_container{
left:-200%;
}
.image4 #image_container{
left:-300%;
}
/* Les images */
#image_container li{
float:left;
}
/* L'encart Bleu */
#encart{
position:absolute;
top:-15px;
left:200px;
background:url('resources/text.png');
width:328px;
height:396px;
}
#bouton{
position:relative;
width:244px;
height:55px;
margin: 300px 0px 0px 40px;
cursor:pointer;
}
/* Les points de navigation */
#dots{
position:absolute;
width:130px;
height:15px;
left:425px;
bottom:-25px;
}
/* les points, avec leur background non selectionné */
#dots li{
float:left;
margin: 0px 2px;
width:12px;
height:12px;
background: url('resources/empty-dot.png');
cursor:pointer;
}
/* Point au survol */
#dots li:hover{
background: url('resources/selected-dot.png');
}
/* Point "selectionné". De la même manière que l'image, on change en fonction de la classe de slider */
.image1 #dots li.button1, .image2 #dots li.button2, .image3 #dots li.button3, .image4 #dots li.button4{
background: url('resources/selected-dot.png');
cursor:normal;
}
/* Un eyecandy */
#glass{
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="slider">
<!-- La banderolle qui contiens toute les images -->
<div id="mask">
<ul id="image_container">
<li><img src="images/bird.jpg"></li>
<li><img src="images/red_bird.jpg"></li>
<li><img src="images/spring.jpg"></li>
<li><img src="images/winter.jpg"></li>
</ul>
</div>
<img src="resources/glass.png" id="glass">
<!-- l'encart bleu. Quoter s'il est genant --><!--
<div id="encart">
<img src="resources/bouton.png" id="bouton">
</div>-->
<!-- fin de l'encart -->
<!-- Les fleches de navigations -->
<ul id="dots">
<!-- les petits points qui affichent ou nous en somme sur le slide -->
<li class="button1" onClick="changeImage(1)" ></li>
<li class="button2" onClick="changeImage(2)" ></li>
<li class="button3" onClick="changeImage(3)" ></li>
<li class="button4" onClick="changeImage(4)" ></li>
</ul>
<img src="resources/fleche-gauche.png" id="fleche_gauche" class="fleche" onClick="prevImage()" >
<img src="resources/fleche-droite.png" id="fleche_droite" class="fleche" onClick="nextImage()" >
</div>
<script>
// Des Variables pour pouvoir modifier facilement ce qui doit l'être
var secDuration = 5;
var image = 1;
var maxImages = 4;
var slider = document.getElementById('slider');
var timeout
// La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres
function changeImage(requiredImage) {
// Début de l'algorithme .
if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image
if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image
image++;
}
else{
image = 1;//Si Nous sommes sur la dernière, on reviens au début
}
}
else{ // Si nous avont spécifié une image
if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première
image = 1;
}
else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image
image = maxImages;
}
else{
image = requiredImage; // Sinon, on vas à l'image spécifiée.
}
}
//On dis au slider à travers sa classe quel image il doit afficher
slider.className = "image"+image;
// On nettoie et relance le timeout
clearTimeout(timeout)
timeout = setTimeout("changeImage()",secDuration*1000);
}
//Deux petites fonctions tres compréhensibles
function nextImage(){
changeImage(image+1);
}
function prevImage(){
changeImage(image-1);
}
//On met le slide sur l'image par défaut, ici la 1ere
changeImage(1);
</script>
</body>
</html>
