html - CSS background-image slideshow -
i pretty new css , html, learning ropes. right now, have background image on header section , trying turn slideshow 3-4 images shuffling through on timer.
i have seen tutorials use images through html, way have set have css property background-image set image.
if doesnt make sense, here css
.global-header { min-height:600px; background-image: url("assets/bgimages/head_sandwichman.jpg"); background-size: cover; text-align: center; }
and html
<header class="container global-header"> <div class="inner-w"> <div class='rmm' data-menu-style = "minimal"> <ul> <li><a href="index.html">home</a></li> <li><a href="menu.html">menu</a></li> <li><a href="findus.html">find us</a></li> <li><a href="about.html">about</a></li> </ul> </div> <div class="large-logo-wrap"> <img src="assets/logos/giadaslogoindexwhitebig.png" /> </div> </div>
thanks help!
use following
<script> //array of images want show: use path want. var images=new array('assets/bgimages/head_sandwichman1.jpg','assets/bgimages/head_sandwichman2.jpg','assets/bgimages/head_sandwichman3.jpg'); var nextimage=0; doslideshow(); function doslideshow(){ if(nextimage>=images.length){nextimage=0;} $('.global-header') .css('background-image','url("'+images[nextimage++]+'")') .fadein(500,function(){ settimeout(doslideshow,1000); }); } </script>
Comments
Post a Comment