CC-Home

by thcipriani

HTML

<div class="container_16">
    <div id="frame" class="grid_16">
        <div id="slideHolder">
            <div class="slide" id="slide1">
        <img src="http://www.customchannels.net/img/music_for_your_business.png" alt="Custom Music for your Business">


            <h3>Enhance Your Brand With Sound Marketing.</h3>


            <a href="#">

                <img src="http://www.customchannels.net/img/learn_more.png" alt="learn more">

            </a>


            <a href="#">

                <img src="http://www.customchannels.net/img/watch_a_video.png" alt="watch a video">

            </a>
            </div><!--end .slide 1-->
            <div class="slide" id="slide2">
         <img src="http://www.customchannels.net/img/music_for_your_business.png" alt="Custom Music for your Business">


            <h3>Don't Enhance Your Brand With Sound Marketing.</h3>


            <a href="#">

                <img src="http://www.customchannels.net/img/learn_more.png" alt="learn more">

            </a>


            <a href="#">

                <img src="http://www.customchannels.net/img/watch_a_video.png" alt="watch a video">

            </a>
            </div><!--end slide 2-->
        </div><!--end #callout-->
    </div><!--end .grid_16-->
</div><!--end container_16">-->
<div class="container_16">
    <div class="grid_16">
        <ul id="slideNav">
            
        </ul>
    </div><!--end .grid_16-->
</div><!--end .container_16-->

CSS

body, html{width:100%;height:100%;margin:0;padding:0; 
}
.container_16{width:370px; margin:0 auto;}
.grid_16{width:350px; float:left; margin:0 10px;}
#frame{height:129px; overflow:hidden; position:relative;}
#slideHolder{width:700px; position:relative;}
.slide{float:left; position:relative;}
ul#slideNav li{float:left; margin-right:15px;}

JavaScript

var n = $(".slide").length;
var selectedSlide = 0;
var transLock = false;

for (var i = 0; i<n; i++)
{
$('#slideNav').append('<li><a class="dot" href="#"><img src="http://www.customchannels.net/img/DOT.png"></a></li>');  
}
/*$("ul#slideNav li:first-Child").html('<a class="selectDot" href="#"><img src="http://www.customchannels.net/img/selectedDOT.png"></a>');*/

$('.dot').click(function(){
    if (transLock) return; 
       else transLock = true;
    var index = $(".dot").index(this);
    //index += 1;
    $('#slideHolder').animate({'left':-(index * 350) + 'px'},750,'swing', function(){
         transLock = false;   
    });   
});