- #1
jeff1evesque
- 312
- 0
I have this script on one of my webpages that is used to create a slideshow. The code works, however, I am not familiar with javascript- that is used for web design. I have studied java for basic programming, but have never seen the notation $, nor the use of a single quote for the argument '.slideList li:gt(0)'. Could someone also explain to me what li:gt(0) means (I've never seen the use of semi colons in java like this before), the addClass funtion, along with the .attr function.
If there is a website I could reference these terms, perhaps that would be best.
$('.slideList li:gt(0)').hide();
--------------------------------------------------------------------------------------
This is the full set of code:
--------------------------------------------------------------------------------------
<ul class="slideList">
<li><img src="PICTURES/"
alt = "We will soon be incorporating a slide show..."></img></li>
<li><img src="PICTURES/"
alt = "... however, we are still undergoing some
other modifications."></img></li>
<li><img src="PICTURES/"
alt = "Since we are a small firm, we are still studying some basic
concepts..."></img></li>
<li><img src="PICTURES/"
alt = "...these concepts will be incorporated on our site in the
near future."></img></li>
</ul>
<script type = "text/javascript" src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type = "text/javascript">
$('.slideList li:gt(0)').hide();
$('.slideList li:last').addClass('last');
var cur = $('.slideList li:first');
function animate()
{
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.slideList li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function( )
{
setInterval( "animate()", 5000 );
});
</script>-------------------------------------------------------------------------------------
In my CSS file I have:
-------------------------------------------------------------------------------------
ul.slideList
{
position: relative; left: 150px; /* See definitions below (#8) */
}
.slideList li {
list-style-type: none; /*Gets rid of bullets next to image/text*/
position: absolute; /* See definitions below (#9) */
}
.slideList img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
Thanks,JL
If there is a website I could reference these terms, perhaps that would be best.
$('.slideList li:gt(0)').hide();
--------------------------------------------------------------------------------------
This is the full set of code:
--------------------------------------------------------------------------------------
<ul class="slideList">
<li><img src="PICTURES/"
alt = "We will soon be incorporating a slide show..."></img></li>
<li><img src="PICTURES/"
alt = "... however, we are still undergoing some
other modifications."></img></li>
<li><img src="PICTURES/"
alt = "Since we are a small firm, we are still studying some basic
concepts..."></img></li>
<li><img src="PICTURES/"
alt = "...these concepts will be incorporated on our site in the
near future."></img></li>
</ul>
<script type = "text/javascript" src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type = "text/javascript">
$('.slideList li:gt(0)').hide();
$('.slideList li:last').addClass('last');
var cur = $('.slideList li:first');
function animate()
{
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.slideList li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function( )
{
setInterval( "animate()", 5000 );
});
</script>-------------------------------------------------------------------------------------
In my CSS file I have:
-------------------------------------------------------------------------------------
ul.slideList
{
position: relative; left: 150px; /* See definitions below (#8) */
}
.slideList li {
list-style-type: none; /*Gets rid of bullets next to image/text*/
position: absolute; /* See definitions below (#9) */
}
.slideList img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
Thanks,JL
Last edited by a moderator: