0

I have a header div that contains menu div,logo div and some text.I wanna make a slide show.I tried JQuery fadeIn() and fadeOut() functions , but when I used the fadeOut() method, all of header content(menu div,logo div etc...) is effected.I wrote a JavaScript function to change the header div's background-image but this time ,it is not like a slide show,it is like a gif image.I need to make a slide with slow passing between images.

My code is here 


        
            var imageArray = new Array();
            var switchMilliseconds = 5000;

            // Specify the id of the div or other HTML tag with the 
            //   background image to switch.

            var divID = "header";

            // To add more images, continue the pattern below.

            imageArray[0] = 'images/header_bg.png';
            imageArray[1] = 'images/1.jpg';
            imageArray[2] = 'images/header_bg.png';
            imageArray[3] = 'images/1.jpg';



            // No further customization needed in this JavaScript

            function publishPicture(i) {

                        document.getElementById(divID).style.background = 'url("' + imageArray[i] + '")';


                    i++;
                    if (i > (imageArray.length - 1)) { i = 0; }
                    setTimeout('publishPicture(' + i + ')', switchMilliseconds);

            }

            publishPicture(0);
KenanYildirim
  • 41
  • 9
  • 1
    Why not use a jQuery slider library such as cycle.js ? http://jquery.malsup.com/cycle/ – BrownEyes Oct 25 '13 at 07:27
  • I added cycle.js library to my project.But it iterates with img tags.I need to change background-image propery not an adding a img tag.Because when I used the img tags the menu and logo div are back of the header div.then I cant see them.thx for your help.How can I solve this problem using cycle.js library or another another idea? – KenanYildirim Oct 25 '13 at 08:00
  • You can simply add a `
    ` with a fixed width and height, and add a `background-image`
     – BrownEyes Oct 25 '13 at 08:02
  • thx Scorpion it works well after setting slide div's z-index property -1. – KenanYildirim Oct 25 '13 at 08:24
  • Glad to hear - forgot to mention you should always give a `position:` and `z-index` to your elements when hiding in jQuery – BrownEyes Oct 25 '13 at 08:25

0 Answers0