Displaying different image after the page reloads

Displaying different image after the page reloads

Hi Guys,
How can I display different images after the page reloads? (The images have to be editable at the front end).
I was thinking using the jQuery Cycle plugin and have set up the following code,however it doesn`t always displays a new image when I refresh the page. I was trying to add the random function, but I don`t think is correct. Here is my code so far: - how can I set this so it doesn`t fades every now and then, only when I refresh the page. Many thanks!

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JQuery Cycle Plugin - Basic Demo</title>
  5. <style type="text/css">
  6. .slideshow { height: 232px; width: 232px; margin: auto; position:relative;}
  7. .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee;position:absolute; }
  8. </style>
  9. <!-- include jQuery library -->
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  11. <!-- include Cycle plugin -->
  12. <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
  13. <script type="text/javascript">
  14. $(document).ready(function() {
  15. var rand = Math.floor(Math.random() * $('.slideshow img').length);
  16.  $('.slideshow').cycle({
  17.         fx:    'fade', 
  18. pause:  250 ,
  19. startingSlide: rand
  20.     });
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <div class="slideshow">
  26. <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
  27. <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
  28. <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
  29. <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
  30. <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
  31. </div>
  32. </body>
  33. </html>