change HTML code for fading background replacing images

Question

This is my HTML code:

 <html> <head> <script language="JavaScript"> <!-- // Set speed (milliseconds) var speed = 4000 // Specify the image files var Pic = new Array() // don't touch this // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'img_1.jpg' Pic[1] = 'img_2.jpg' Pic[2] = 'img_3.jpg' Pic[3] = 'img_4.jpg' // ======================================= // do not edit anything below this line // ======================================= var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runBGSlideShow(){ if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runBGSlideShow()', speed) } } //--> </script> </head> <body onload="runBGSlideShow()"> </body> </html>

I tried everything I know to change it so the pictures will fade when replacing but I didn't succeed. If you can I will appreciate it if you will add to the HTML code (if can't it's ok to add css ) Please look and see if you can help me.

Answer 1

Why reinvent the wheel?

There's a beautiful jQuery plugin that does this already

http://srobbin.com/jquery-plugins/backstretch/

change HTML code for fading background replacing images

Question

1 answers

solution1
0 2016-10-10 05:03:58

change HTML code for fading background replacing images

Question

1 answers

solution1 0 2016-10-10 05:03:58

solution1
0 2016-10-10 05:03:58