Slider

by Lien Z

HTML

<div id="new_slider">
    <ul>
        <li><a href=""><img src="http://images.pchome.net/global/uedshare/pic1.jpg"  /></a></li>
        <li><a href=""><img src="http://images.pchome.net/global/uedshare/pic2.jpg"  /></a></li>
        <li><a href=""><img src="http://images.pchome.net/global/uedshare/pic3.jpg"  /></a></li>
        <li><a href=""><img src="http://images.pchome.net/global/uedshare/pic4.jpg"  /></a></li>
        <li><a href=""><img src="http://images.pchome.net/global/uedshare/pic2.jpg"  /></a></li>
        <li><a href=""><img src="http://images.pchome.net/global/uedshare/pic1.jpg"  /></a></li>
    </ul>
</div>

CSS

*{padding:0; margin:0; list-style-type:none;}
#new_slider{width:200px; height:150px; overflow:hidden; position:relative;}
#new_slider ul{height:150px;}
#new_slider ul li{width:200px; height:150px; float:left; text-align:center;}
#new_slider ul li img{width:200px; height:150px; display:block; border:none;}
#new_slider #slider_counter{bottom:10px; right:10px; position:absolute; height:16px;}
#new_slider #slider_counter li{width:16px; height:16px; background:#dddddd; margin-left:5px; font-size:13px; line-height:16px; cursor:pointer;}
#new_slider #slider_counter .current{background:#ff0000; color:#ffffff; font-weight:bold;}
#new_slider #slider_title{width:200px; height:40px; bottom:0; left:0; position:absolute; background:#000000; color:#ffffff; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);}

JavaScript

function new_slider(slidercon, mainspeed, inspeed, outspeed) {
    this.slidercon = slidercon;
    this.mainspeed = mainspeed;
    this.inspeed = inspeed;
    this.outspeed = outspeed;
    var i = 1;
    
    $(slidercon).append('<div id="slider_title"></div>');
    $(slidercon).children("#slider_title").html($(slidercon).children("ul:first").children("li:eq(0)").children("a").children("img").attr("title"));
    $(slidercon).append('<ul id="slider_counter"></ul>');
    
    
    $(slidercon).children("#slider_counter").children("li").mouseover(function() {
        var index = $.inArray(this, $(slidercon).children("#slider_counter").children("li"));
        $(slidercon).children("#slider_counter").children("li").removeClass("current").eq(index).addClass("current");
        $(slidercon).children("ul:first").children("li").fadeOut(outspeed).eq(index).fadeIn(inspeed);
        $(slidercon).children("#slider_title").html($(slidercon).children("ul:first").children("li:eq(" + parseInt($(this).html() - 1) + ")").children("a").children("img").attr("title"));
        i = $(this).index() + 1;
        if (i == $(slidercon).children("ul:first").children("li").length) {
            i = 0;
        };
    });

    function init() {
        $(slidercon).children("ul:first").children("li:not(" + i + ")").fadeOut(outspeed);
        $(slidercon).children("ul:first").children("li:eq(" + i + ")").fadeIn(inspeed);
        $(slidercon).children("#slider_counter").children("li:not(" + i + ")").removeClass("current");
        $(slidercon).children("#slider_counter").children("li:eq(" + i + ")").addClass("current");
        $(slidercon).children("#slider_title").html($(slidercon).children("ul:first").children("li:eq(" + i + ")").children("a").children("img").attr("title"));
        i++;
        if (i >= $(slidercon).children("ul:first").children("li").length) {
            i = 0;
        };
    };
    var move = setInterval(init, mainspeed);
    $(slidercon).mouseover(function() {
       ...