Javascript Request
Hey, I was just wondering if there is any way to make a slideshow easily with javascript. I don't want 100 lines of code. I want a few lines of code to give me a slideshow that scrolls to the left automatically. Possibly with an arrow button on both the left and right sides (centered vertically). If this is possible I'd appreciate it!
37 lines (including html and css)
Code:
<html>
<head>
</head>
<style>
.left{display:inline}
#thepic{
height:200px;
width:200px
}
</style>
<body>
<input type="button" value="<" onclick="move('down')" class="left"/>
<img id="thepic" class="left" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg"></img>
<input type="button" value=">" onclick="move('up')" class="left"/><br>
<input type="button" value="stop" onclick="pause()" />
<script type="text/javascript">
var pics=["http://startraisingrabbits.com/wp-content/uploads/2011/10/Raising-Rabbits.jpg", "http://www.enchantedlearning.com/rgifs/Rabbit_bw.GIF", "http://www.apbc.org.uk/sites/default/files/images/rabbit2.jpg", "http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg"];
function move(dir){
if(timer){clearTimeout(timer)}
if(dir=="down"){
pics.unshift(pics.pop())
} if(dir=="up"){
pics.push(pics.shift())
}
timer=setTimeout(function (){move(dir)}, 2000)
document.getElementById("thepic").src=pics[0];
}
var timer=setTimeout(function (){move("up")}, 2000)
function pause(){
clearTimeout(timer);
}
</script>
</body>
</html>
Originally Posted by
xelawho
37 lines (including html and css)
Code:
<html>
<head>
</head>
<style>
.left{display:inline}
#thepic{
height:200px;
width:200px
}
</style>
<body>
<input type="button" value="<" onclick="move('down')" class="left"/>
<img id="thepic" class="left" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg"></img>
<input type="button" value=">" onclick="move('up')" class="left"/><br>
<input type="button" value="stop" onclick="pause()" />
<script type="text/javascript">
var pics=["http://startraisingrabbits.com/wp-content/uploads/2011/10/Raising-Rabbits.jpg", "http://www.enchantedlearning.com/rgifs/Rabbit_bw.GIF", "http://www.apbc.org.uk/sites/default/files/images/rabbit2.jpg", "http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg"];
function move(dir){
if(timer){clearTimeout(timer)}
if(dir=="down"){
pics.unshift(pics.pop())
} if(dir=="up"){
pics.push(pics.shift())
}
timer=setTimeout(function (){move(dir)}, 2000)
document.getElementById("thepic").src=pics[0];
}
var timer=setTimeout(function (){move("up")}, 2000)
function pause(){
clearTimeout(timer);
}
</script>
</body>
</html>
Thanks so much! Is there a way to get the buttons inside the picture?
Ok, there are some other things i need in this:buttons inside the picture
how to replace buttons with pictures
a "scrolling" left effect, so that it looks like someone is dragging the picture out and the new picture in
buttons inside the pic:
Code:
<html>
<head>
</head>
<style>
#left{margin-top:50%;float:left}
#right{margin-top:50%;float:right}
#thepic{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg");
background-repeat:no-repeat;
background-size:200px 200px;;
height:200px;
width:200px;
}
</style>
<body>
<div id="thepic">
<input type="button" value="<" onclick="move('down')" id="left"/>
<input type="button" value=">" onclick="move('up')" id="right"/>
</div>
<br>
<input type="button" value="stop" onclick="pause()" />
<script type="text/javascript">
var pics=["http://startraisingrabbits.com/wp-content/uploads/2011/10/Raising-Rabbits.jpg", "http://www.enchantedlearning.com/rgifs/Rabbit_bw.GIF", "http://www.apbc.org.uk/sites/default/files/images/rabbit2.jpg", "http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg"];
function move(dir){
if(timer){clearTimeout(timer)}
if(dir=="down"){
pics.unshift(pics.pop())
} if(dir=="up"){
pics.push(pics.shift())
}
timer=setTimeout(function (){move(dir)}, 2000)
document.getElementById("thepic").style.backgroundImage="url("+pics[0]+")";
}
var timer=setTimeout(function (){move("up")}, 2000)
function pause(){
clearTimeout(timer);
}
</script>
</body>
</html>
Originally Posted by
xelawho
buttons inside the pic:
Thank you so much!
What about a slide left or right effect?
seriously i want the sliding/scrolling to the left/right effect. If anyone knows hoq to do it please answer!
It starts out as a blank picture and then displays the second image. Please help!
do you give the div an initial background image in the css like I did:
Code:
#thepic{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Rabbit_in_montana.jpg/250px-Rabbit_in_montana.jpg");
background-repeat:no-repeat;
background-size:200px 200px;;
height:200px;
width:200px;
}
</style>
?
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Originally Posted by xelawho
Bookmarks