html & javascript slideshow is not working (button)

Question 1

When you call nextphoto() and lastphoto() you are only changing the step variable... you aren't actually doing anything with it.

(Edit: I've just noticed that you've already defined step... my mistake)

Firstly, you need to call slideit() within nextphoto() and lastphoto()...

function nextphoto() {
  step = step + 1;   // This can also be done with step++;
  slideit();
}
function lastphoto(){
  step = step - 1;   // This can also be done with step--;
  slideit();
}

Secondly, you should really think about using arrays instead of individual variables.

For instance...

 var images = [];
 images.push("http://3.bp.blogspot.com/-5A5xpicPF5g/T8srguvp3TI/AAAAAAAAEPs/bLuFIK0gDss/s400/nature-wallpaper-23.jpg")
 images.push("http://1.bp.blogspot.com/-IlYDMtyXMRU/Tekx0hgHwOI/AAAAAAAAQg8/rhY1roUhBEQ/s400/Nature%252520Mountains%252520photo.jpg")

Then you can go through images[0], images[1] etc

Question 2

This one is the way to go

Loading Images

var size = 20;
var image = [];
for(i=0; i<size; i++) image.push(new Image());
image[0].src = "http://3.bp.blogspot.com/-5A5xpicPF5g/T8srguvp3TI/AAAAAAAAEPs/bLuFIK0gDss/s400/nature-wallpaper-23.jpg"
image[1].src = "http://1.bp.blogspot.com/-IlYDMtyXMRU/Tekx0hgHwOI/AAAAAAAAQg8/rhY1roUhBEQ/s400/Nature%252520Mountains%252520photo.jpg"
image[2].src = "http://4.bp.blogspot.com/-1hG0IHVo9Y8/UYDx-XrTOWI/AAAAAAAAO5w/GvJsWP3ztmo/s400/desktop-nature-wallpapers.jpg"
image[3].src = "http://2.bp.blogspot.com/-TCNzi5H1sac/UEhqAEBrezI/AAAAAAAABEs/fNX6Tb9GNbI/s400/beautiful-jungle-waterfall-nature-wallpaper.jpg"
image[4].src = "https://www.gocolumbiamo.com/ParksandRec/Parks/Forum_Nature_Area/images/forum_nature_area2.jpg"
image[5].src = "http://2.bp.blogspot.com/_3f95iVVUx6I/S84ZvEqhxRI/AAAAAAAAPEc/5270_bLigcQ/s400/Nature-Photos-6.jpg"
image[6].src = "http://1.bp.blogspot.com/-5mMn7WmIvAI/UB_vkoq0UAI/AAAAAAAAAMc/P74UqHgpSqo/s1600/beautiful-nature-tree-water-background-wallpaper-for-laptop-desktop.jpg"
image[7].src = "http://www.creative-writing-now.com/images/let-nature-lead-the-way-21241647.jpg"
image[8].src = "http://2.bp.blogspot.com/-JxEm57kYpms/UMAvQULqnuI/AAAAAAAAOis/vVuC7CIN-BU/s400/Green+Nature+Wallpapers+02.jpg"
image[9].src = "http://3.bp.blogspot.com/-w9houFtpzjM/T-XtaJ0cKoI/AAAAAAAAEas/aMvENEphhNI/s400/Fantasy+Nature+Wallpapers+1.jpg"
image[10].src = "http://c3e308.medialib.glogster.com/media/96/96ef80fa1195ebb760529a4a6d3cccdb11a4a003903ae7df953eddf62efa5ee1/fabulous-nature.jpg"
image[11].src = "http://2.bp.blogspot.com/-BNzMjXhqa5c/Te2RFA7NWgI/AAAAAAAAAVo/Jv6NZB1qFZ4/s1600/beijing+Songshan.jpg"
image[12].src = "http://2.bp.blogspot.com/__GPVmySbCtY/SM5gmBop62I/AAAAAAAAAUA/b07tAsJ_mEY/s400/nature-summer-wallpaper-22.jpg"
image[13].src = "http://1.bp.blogspot.com/_E0lrTQ7bI1Q/Sdiss6QL4LI/AAAAAAAAAgI/MLDVrT6SrOI/s400/Nature+Wallpapers+9.jpg"
image[14].src = "http://photography.naturestocklibrary.com/orca-stock-photo.jpg"
image[15].src = "http://2.bp.blogspot.com/-yO7L_hm-MKo/TW-ongr6jkI/AAAAAAAAGEI/SHe6bu0ihyA/s400/free-wallpapers-nature-846_001.jpg"
image[16].src = "http://2.bp.blogspot.com/_sx0Gt1J0RnM/Scw5mF5LR0I/AAAAAAAACO8/gz_XhyQ0mCg/s400/FunN2sHhWallPapers.Blogspot.com_HD.Digital.Nature_20.jpg"
image[17].src = "http://www.mobileapples.com/Assets/Content/Wallpapers/Natural%20Beauty%20In%20Cold.jpg"
image[18].src = "http://www.topchinatravel.com/pic/city/zhangjiajie/attractions/Tianzi-Mountain-Nature-Reserve-3.jpg"
image[19].src = "http://magickalgraphics.com/Graphics/Miscellaneous/Nature/nature48.gif"

Sliding through

var id;
var step = 1;

function nextphoto(){
    step=(step+1)%size;
    document.images.slide.src = image[step].src;
}
function lastphoto(){
    step=((step-1)+size)%size;
    document.images.slide.src = image[step].src;
}
function slideit()
{
    step=(step+1)%size;
    document.images.slide.src = image[step].src;
}
id = setInterval(slideit, 2000);

Note: If you want to added more images, you will just need to change var size = 20; line and add image[??].src = "http://...";

Question 3

modify the functions as

function nextphoto(){
 step=step+1;
 slideIt();
}

//edit:style(below)

function lastphoto(){
  step=step-1;
  slideIt();
}

and try replacing

document.images.slide.src = eval("image"+step+".src");

with

document.getElementByName('slide').src= eval("image"+step+".src");