change both image and text css properties simultaneously with jQuery

bulwinkl

New Member
I have some images and corresponding images names. I want to change both image and corresponding image name (css properties) simultaneously in some time interval (fadeIn/fadeOut for images).My html code:\[code\]<div id="s_links"><ul class="s_list"> <li class="home_p"><a class="lists1">img1 name</a></li> <li class="home_p"><a class="lists2">img2 name</a></li> <li class="home_p"><a class="lists3">img3 name</a></li> <li class="home_p"><a class="lists4">img4 name</a></li> <li class="home_p"><a class="lists5">img5 name!</a></li></ul></div><div id="slideshow"> <img class="one" src="http://stackoverflow.com/questions/15498072/img1"> <img class="two" src="http://stackoverflow.com/questions/15498072/img2"> <img class="three" src="http://stackoverflow.com/questions/15498072/img3"> <img class="four" src="http://stackoverflow.com/questions/15498072/img4"> <img class="five" src="http://stackoverflow.com/questions/15498072/img5"></div>\[/code\]for example if current image is 'img3' , then css should be :- \[code\]jQuery(".lists3").css({ "background-color": "#677FC6", "border": "1px solid #677FC6", "border-radius": "6px"});jQuery(".lists1,.lists2, .lists4,.lists5").css({ "background": "none", "border": "none", "color": "#000"});\[/code\]Please Help me... Thankzi tried with this codes, images working perfectly but css cant change\[code\]$(function() { var current = 0;$imgs = jQuery('#header .abc71'); imgAmount = $imgs.length; $($imgs.css('position', 'absolute').hide().get(0)).show(); window.setInterval(swapImages, 4000); function swapImages() { var $currentImg = $($imgs[current]); if(current == imgAmount-1) current = -1; var $nextImg = $($imgs[++current]), speed = 1500; // animation speed should be the same for both images so we have a smooth change $currentImg.fadeOut(speed); $nextImg.fadeIn(speed); }});\[/code\]
 
Back
Top