473,389 Members | 1,094 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,389 software developers and data experts.

How to create a rotating slide effect in javascript

Hi I am trying to build a roating slide effect in javascript.
Basically, I have a list like below

<ul id="slideShowCnt">
<li id="slide0"><img .../></li>
<li id="slide0"><img .../></li>
<li id="slide0"><img .../></li>
<li id="slide0"><img .../></li>
<li id="slide0"><img .../></li>
<li id="slide0"><img .../></li>
</ul>
<button value="next" />
<button value="prev" />

All the "li" will be placed horizontally (floated using css). At any
given time, only 3 images will be shown. Clicking on the "next/prev"
buttons will slide the images forward and backward. But the images
will have to follow a cyclical path with no end. In other words if you
click on next the first images will slide smoothly to left and the 1st
image will go out of the view. After clicking on the next button a
couple of times the 1st image will cycle back from the right hand
side.
I have implemented the logic for swapping image position but I am
unable to find a way to slide the images smoothly.
can anyone help? I think this has become a little too complicated.

Mar 9 '07 #1
3 5218
On Mar 9, 4:15 am, "Beamer" <amitrai2...@gmail.comwrote:
Hi I am trying to build a roating slide effect in javascript.
Basically, I have a list like below
All the "li" will be placed horizontally (floated using css). At any
given time, only 3 images will be shown. Clicking on the "next/prev"
buttons will slide the images forward and backward. But the images
will have to follow a cyclical path with no end.
like this-

<html><head><title>Simple doc</title>
<style type="text/css">
li {display:inline;}
img {width:111;height:77}
ul {position:relative;left:0}
</style>
<script type="text/jscript">
function gn(dr){
ulElem=document.getElementById("slideShowCnt").sty le
effect=setInterval(function(){ulElem.left=parseInt (ulElem.left||0)+
(dr?-1:+1)},1)
setTimeout(function(){window.clearInterval(effect) },1000)
}
</script>
</head>
<body>
<ul id="slideShowCnt">
<li id="slide0"><img .../></li>
<li id="slide1"><img .../></li>
<li id="slide2"><img .../></li>
<li id="slide3"><img .../></li>
<li id="slide4"><img .../></li>
<li id="slide5"><img .../></li>
</ul>
<button value="next" onclick="gn(1)" />Next</button>
<button value="prev" onclick="gn(0)" />Prev</button>
</body>
</html>

Mar 9 '07 #2
On Mar 9, 6:36 pm, scripts.cont...@gmail.com wrote:
On Mar 9, 4:15 am, "Beamer" <amitrai2...@gmail.comwrote:
Hi I am trying to build a roating slide effect in javascript.
Basically, I have a list like below
All the "li" will be placed horizontally (floated using css). At any
given time, only 3 images will be shown. Clicking on the "next/prev"
buttons will slide the images forward and backward. But the images
will have to follow a cyclical path with no end.

like this-

<html><head><title>Simple doc</title>
<style type="text/css">
li {display:inline;}
img {width:111;height:77}
ul {position:relative;left:0}
</style>
<script type="text/jscript">
function gn(dr){
ulElem=document.getElementById("slideShowCnt").sty le
effect=setInterval(function(){ulElem.left=parseInt (ulElem.left||0)+
(dr?-1:+1)},1)
setTimeout(function(){window.clearInterval(effect) },1000)}

</script>
</head>
<body>
<ul id="slideShowCnt">
<li id="slide0"><img .../></li>
<li id="slide1"><img .../></li>
<li id="slide2"><img .../></li>
<li id="slide3"><img .../></li>
<li id="slide4"><img .../></li>
<li id="slide5"><img .../></li>
</ul>
<button value="next" onclick="gn(1)" />Next</button>
<button value="prev" onclick="gn(0)" />Prev</button>
</body>
</html>
Thats smooth! But I still need to figure out how to make the images
not vanish from the scene!

Mar 10 '07 #3
sc*************@gmail.com wrote:
On Mar 9, 4:15 am, Beamer wrote:
>Hi I am trying to build a roating slide effect in javascript.
Basically, I have a list like below
>All the "li" will be placed horizontally (floated using css).
At any given time, only 3 images will be shown. Clicking on
the "next/prev" buttons will slide the images forward and
backward. But the images will have to follow a cyclical path
with no end.

like this-
* Horizontal layout; yes.
* 3 images show at once; no.
* Clicking buttons slides images in appropriate directions; not reliably.
* Cyclic path; no.
<html><head><title>Simple doc</title>
<style type="text/css">
li {display:inline;}
img {width:111;height:77}
CSS requires all non-zero dimension values to state the units in which
they are measured. IE may sometimes assume all values without units are
pixel values but other browsers are known to be stricter.
ul {position:relative;left:0}
</style>
<script type="text/jscript">
There is nothing in the following code that is unique to JScript(tm) and
so no good reason for using type=text/jscript" and having a number of
browsers regard the type of the script as unsupported.
function gn(dr){
ulElem=document.getElementById("slideShowCnt").sty le
Why is - ulElem - global when it could be local, and as it is a - style -
object why does its name imply that it is a reference to an element?
effect=setInterval(function(){ulElem.left=parseInt (ulElem.left||0)
Why is - effect - global when it could be local. This one highlights the
reason for never giving a variable more scope than it absolutely needs,
as being global means that a second call to the - gn - function will
re-assign the new value returned from - setInterval - to the one global
variable, meaning that any running - setInterval - will not be terminated
by a subsequent call to - clearInterval -, and the - setTimeout -
scheduled call to - clearInterval - from the preceding use of - gn - will
prematurely stop the setInterval action from the later call to - gn -. If
the - effect - variable were local then at least the inner function used
with setTimeout would be referring to its corresponding - effect -
variable, and cancelling the correct scheduling.

Not that this change would solve the issues with this design, but they
would stop it from being truly chaotic, as it is now.
+ (dr?-1:+1)},1)
Attempting a one millisecond interval is going to flog the browser for no
good reason. Human perception is such that the illusion of continuous
motion is achieved at about 20 frames pre second. Attempting to
re-position anything more often than about 30 frames per second is not
going make anything appear any smoother, and the odds are that the
combination of browser, CPU and OS could not deliver that anyway (with
the OS being a significant impediment).

Also, here the distance travelled is going to be variable. The system is
given a fixed (though imprecise) period in which to make as many one
pixel moves as it can. If the OS is ticking the clock at 10 millisecond
intervals it may get 100 1px steps in, and if at 56 milliseconds it may
manage 17, but both would assume zero time for the execution of the
positioning function and the browser's attempt to re-draw the results.
The actual time taken for these operations will depend on the CPU speed,
the speed of other system components and the loading on the computer
(background tasks and the like), at minimum.
setTimeout(function(){window.clearInterval(effect) },1000)
}
</script>
</head>
<body>
<ul id="slideShowCnt">
<li id="slide0"><img .../></li>
^
Why the pseudo xhtml mark-up in a document that appears to be targeted at
IE only (because of the CSS errors and text/jscript script type), given
that IE does not support xhtml?
<li id="slide1"><img .../></li>
<li id="slide2"><img .../></li>
<li id="slide3"><img .../></li>
<li id="slide4"><img .../></li>
<li id="slide5"><img .../></li>
</ul>
<button value="next" onclick="gn(1)" />Next</button>
This is where using pseudo xhtml shows itself to be the folly it is. If
this document ever were interpreted as xhtml it would not be well-formed
(which is required of all XML documents), and even if error corrected it
would not be functional, as the <button /tag must be interpreted as a
content-less element, and so potentially have no manifestation on which a
user could click. Certainly clicking on the "Next" text outside the empty
button element would be ineffective.

If a document's viability is predicated upon its only ever being
interpreted as (possibly tag-soup) html (and never xhtml), either because
of the mark-up it contains or its scripted reliance upon the behaviour of
an HTML DOM as opposed to an XHTML DOM, then it doesn't really makes
sense to mark it up as xhtml (or include mark-up resembling xhtml).
<button value="prev" onclick="gn(0)" />Prev</button>
The official default type of a BUTTON element is SUBMIT. IE gets this
wrong and assumes it to be BUTTON, but other browsers will assume SUBMIT
and then interacting with these buttons would submit any form that
contained them. In the absence of a form, as here, there will be no
submission, but still it is advisable to always give a BUTTON element an
explicit TYPE attribute to avoid ambiguities in its default behaviour.
</body>
</html>
What happens here if the user clicks back and forth between buttons (or
repeatedly on the same button) within the second that it takes each
transition to run? At the moment the outcome is chaos, but even with
global variables changed to local variables the outcome is less than
desirable.

Richard.

Mar 10 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i...
7
by: 7mary4 | last post by:
I am working on a kiosk for a museum, we will be using firefox as the browser, with windows, and a touch screen. We'd like to create a slide show of a small portfolio when the visitors click...
14
by: mikeoley | last post by:
Why would this script below work on an html page: http://www.eg-designdev.com/aircylinders/test.htm But not a java page such as this: "http://www.eg-designdev.com/aircylinders/index3.jsp" Or...
7
by: Rudy | last post by:
Hello All! After working in the television industry, moving to a developing career has been interesting to say the least. 3 years of developing with books, and the help of you fine folks on this...
2
by: mistral | last post by:
I want place custom text rotating around analogue clock. Here is javascript that is clise to my task: http://javascript.internet.com/time-date/mousetrailclock.html But it have a few...
1
by: AR123 | last post by:
Hi I want to set up a rotating banner. Not sure how to incorporate my rotating banner code into the code below. I want the rotating banner to be the main feature image? This is set up in...
1
by: Jeigh | last post by:
I've been searching around quite a bit but I can't seem to find what I'm looking for. I'm after a tutorial or source code I could look at for rotating images with a fade effect. I'm looking to have...
7
by: metaphysics | last post by:
For a portfolio I am trying to make, I would like to be able to have a couple thumbnails on the page, that, when clicked, cause a box to horizontally slide in above the thumbnails. I am looking to...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.