2
Ich arbeite an einem Schieberegler. Ich möchte die Klasse "aktiv" zum Schiebereglerbild hinzufügen, wenn der entsprechende Auslöser mit der Funktion eq() angeklickt wird. Ich greife auf Bilder über den Trigger-Index zu, aber es funktioniert nicht, was ist ein echtes Problem? Inhalt des Schiebereglers anzeigen, wenn der zugehörige Auslöser angeklickt wird
$(document).ready(function() {
\t \t
\t \t setInterval(function set() {
\t \t var nextItem = $('.item.active').slideDown().removeClass('active').next('.item');
\t \t var nextTrigger = $('.trigger.active').removeClass('active').next('.trigger');
\t \t
\t \t if ((nextItem.length === 0) && (nextTrigger.length === 0)) {
\t \t \t nextItem = $('.item').first();
\t \t \t nextTrigger = $('.trigger').first()
\t \t }
\t \t nextItem.slideUp().addClass('active ');
\t \t nextTrigger.addClass('active ');
\t }, 5000);
\t \t $(".images li:first").addClass("first");
\t \t $(".images li:last").addClass("last");
\t \t
\t \t $(".next").click(function(e){
\t \t \t e.preventDefault();
\t \t
\t \t \t if($(".images").find(".active").hasClass("last")){
\t \t \t \t $(".images").find(".active").removeClass("active");
\t \t \t \t $(".images li:first").addClass("active");
\t \t \t \t $(".triggers").find(".active").removeClass("active");
\t \t \t \t $(".triggers li:first").addClass("active");
\t \t \t } else {
\t \t \t \t $(".images").find(".active").removeClass("active").next().addClass("active");
\t \t \t \t $('.trigger.active').removeClass('active').next().addClass('active');
\t \t \t }
\t \t \t
\t \t });
\t \t
\t \t $(".prev").click(function(e){
\t \t \t e.preventDefault();
\t \t \t if($(".images").find(".active").hasClass("first")){
\t \t \t \t $(".images").find(".active").removeClass("active");
\t \t \t \t $(".images li:last").addClass("active");
\t \t \t \t $(".triggers").find(".active").removeClass("active");
\t \t \t \t $(".triggers li:last").addClass("active");
\t \t \t } else {
\t \t \t \t $(".images").find(".active").removeClass("active").prev().addClass("active");
\t \t \t \t $('.trigger.active').removeClass('active').prev().addClass('active');
\t \t \t }
\t \t \t
\t \t });
\t \t
\t \t
\t \t $("ul.triggers li").click(function(e){
\t \t \t e.preventDefault();
\t \t \t if (!$(this).hasClass('active')){
\t \t \t \t $('.trigger.active').removeClass('active');
\t \t \t \t $(this).addClass('active');
\t \t \t \t $(".images").find(".active").removeClass("active");
\t \t \t \t $(".images").eq($(this).index()).addClass("active");
\t \t \t }
\t \t });
\t \t
\t \t
\t });ul.images li img{
\t \t width: 1000px;
\t \t height: 500px;
\t \t margin-left: 105px;
\t \t
\t }
\t ul.images li {
\t \t list-style: none;
\t \t display: none;
\t }
\t ul.images li.active{
\t \t display: block;
\t }
\t .controls{
\t \t margin: 20px 0 0 500px;
\t }
\t .triggers li{
\t \t list-style: none;
\t \t display: inline;
\t \t margin-left: 10px;
\t }
\t .triggers{
\t \t display: inline;
\t \t margin-right: 53px;
\t }
\t .triggers li a{
\t \t text-decoration: none;
\t \t color: black;
\t }
\t
\t ul.triggers li.active {background-color:gray; color:white; width: 20px; height: 10px;}<!DOCTYPE html>
\t <html>
\t \t <head>
\t \t \t <script src="jquery/jquery.js" type="text/javascript"></script>
\t \t \t <script src="jquery/slider.js" type="text/javascript" /></script>
\t \t \t <link href="css/slider.css" type="text/css" rel="stylesheet">
\t \t </head>
\t \t <body>
\t \t \t <div id="container">
\t \t \t \t \t \t <ul class="images">
\t \t \t \t \t \t \t <li class="item active"> <img src="images/1.jpg"> </li>
\t \t \t \t \t \t \t <li class="item"> <img src="images/2.jpg"></li>
\t \t \t \t \t \t \t <li class="item"> <img src="images/3.jpg"> </li>
\t \t \t \t \t \t \t <li class="item"> <img src="images/4.jpg"> </li>
\t \t \t \t \t \t </ul> \t
\t \t \t \t <div class="controls">
\t \t \t \t \t <a href="" class="prev"> <img src="images/prev.png" width="30px" > </a>
\t \t \t \t \t <ul class="triggers">
\t \t \t \t \t \t <li class="trigger active"> <a href=""> 1 </a> </li>
\t \t \t \t \t \t <li class="trigger"> <a href=""> 2 </a> </li>
\t \t \t \t \t \t <li class="trigger"> <a href=""> 3 </a> </li>
\t \t \t \t \t \t <li class="trigger"> <a href=""> 4 </a> </li>
\t \t \t \t \t </ul>
\t \t \t \t \t <a href="#" class="next"> <img src="images/next.png" width="30px" > </a>
\t \t \t \t </div>
\t \t \t </div>
\t \t </body>
\t </html>
hurrah: D Problem behoben, vielen Dank :) –
Kein Problem! Froh, dass ich helfen kann :) – kennho