imaffontino
New Member
i have a problem in javascript [NOT JQUERY];i want to create slideshow, for each slide i create that want when user click on it, jump to that slide...\[code\]var images = $('#images img'), image;for(var i = 0; image = images; i++){ var a = document.createElement('span'); a.onclick = function(){ var img = image; removeClass(); console.log(img); img.className = 'active'; } $('#nav')[0].appendChild(a);}\[/code\]in above code i am trying remove active class name from slides and then add active to related slide, but i don't know how can get that slide in span.onclick functionMy Code:\[code\]<!doctype html>\[/code\]\[code\]<head> <title>Welcome</title> <style> #images {position:relative;} #images img {position:absolute;top:0;right:0;opacity:0;transition:all 0.8s;-webkit-transition:all 0.8s;} .active {opacity:1!important;} #nav span {display:inline-block;width:12px;height:12px;background:red;border:1px solid #CCC;cursor
ointer;} </style></head><body> <div id="images"> <img src="http://stackoverflow.com/questions/14045993/1.jpg" class="active" /> <img src="http://stackoverflow.com/questions/14045993/2.jpg" /> <img src="http://stackoverflow.com/questions/14045993/3.jpg" /> <img src="http://stackoverflow.com/questions/14045993/4.jpg" /> <img src="http://stackoverflow.com/questions/14045993/5.jpg" /> <img src="http://stackoverflow.com/questions/14045993/6.jpg" /> </div> <div id="nav"></div></body><script> function $(id) { return document.querySelectorAll(id); } function removeClass(){ var images = $('#images img'), image; for(var i = 0; image = images; i++) { image.className = ''; } } var images = $('#images img'), image; for(var i = 0; image = images; i++) { var a = document.createElement('span'); a.onclick = function(){ var img = image; removeClass(); console.log(img); img.className = 'active'; } $('#nav')[0].appendChild(a); } function start(){ return setInterval(function() { var current = $('.active')[0]; var next = current.nextElementSibling; if(!next){ console.log('noefds f as'); next = $('#images img:first-child')[0]; } current.className = ''; next.className = 'active'; },1000); }; slide = start(); var holder = $('#images')[0]; holder.onmouseenter = function(){ clearInterval(slide); } holder.onmouseleave = function(){ slide = start(); }</script>\[/code\]
ointer;} </style></head><body> <div id="images"> <img src="http://stackoverflow.com/questions/14045993/1.jpg" class="active" /> <img src="http://stackoverflow.com/questions/14045993/2.jpg" /> <img src="http://stackoverflow.com/questions/14045993/3.jpg" /> <img src="http://stackoverflow.com/questions/14045993/4.jpg" /> <img src="http://stackoverflow.com/questions/14045993/5.jpg" /> <img src="http://stackoverflow.com/questions/14045993/6.jpg" /> </div> <div id="nav"></div></body><script> function $(id) { return document.querySelectorAll(id); } function removeClass(){ var images = $('#images img'), image; for(var i = 0; image = images; i++) { image.className = ''; } } var images = $('#images img'), image; for(var i = 0; image = images; i++) { var a = document.createElement('span'); a.onclick = function(){ var img = image; removeClass(); console.log(img); img.className = 'active'; } $('#nav')[0].appendChild(a); } function start(){ return setInterval(function() { var current = $('.active')[0]; var next = current.nextElementSibling; if(!next){ console.log('noefds f as'); next = $('#images img:first-child')[0]; } current.className = ''; next.className = 'active'; },1000); }; slide = start(); var holder = $('#images')[0]; holder.onmouseenter = function(){ clearInterval(slide); } holder.onmouseleave = function(){ slide = start(); }</script>\[/code\]