自制taobao首页的slider

由于时间久了图片失效了我就不负责了。。

ps:用position:relative做实在是太恶心了。。我以为用js修改dom结构……

css:

 

        #slider {
            position: relative;
            width: 470px;
        }

        img {
            width: 440px;
            height: 135px;
        }

        .slider-content {
            width: 440px;
            height: 135px;
            overflow: hidden;
            position: relative;
            margin-left: 15px;
        }

        .mall-prev, .mall-next {
            border: 1px solid #D5D5D5;
            width: 13px;
            height: 133px;
            display: block;
            position: absolute;
            cursor: pointer;
            outline: 0 none;
        }

        .mall-prev {
            left: 0;
        }

        .mall-next {
            right: 0;
        }

        .mall-prev span, .mall-next span {
            width: 5px;
            height: 9px;
            background: url("http://img08.taobaocdn.com/tps/i8/T1xPJCXeVkXXXXXXXX-170-394.png") no-repeat scroll -999em 0 transparent;
            display: block;
            position: absolute;
            top: 44%;
            left: 40%;
            overflow: hidden;
        }

        .mall-prev span {
            background-position: -125px -109px;
        }

        .mall-next span {
            background-position: -130px -109px;
        }

        .slider-content ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 1500px;
            position: absolute;
            left: -440px;
        }

        .slider-content ul li {
            float: left;
        }

        .clearfix:after {
            display: block;
            height: 0;
            content: '\0020';
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .mall_rev_last {
            position: relative;
            left: 1320px;
        }
        .mall_next_first{
            position: relative;
            left: -1320px;
        }

 

 

html:

<div id="slider">
    <a title="上一页" target="_self" href="#" hidefocus="true" class="mall-prev" id="J_MallPrev"><span></span></a>
    <a title="下一页" target="_self" href="#" hidefocus="true" class="mall-next" id="J_MallNext"><span></span></a>

    <div class="slider-content" id="J_sliderContent">
        <ul>
            <li class="clearfix"><img src="http://img06.taobaocdn.com/tps/i6/T15j0CXg0dXXXXXXXX-470-150.gif" alt="">
            </li>
            <li class="clearfix"><img src="http://img.alimama.cn/bcrm/adboard/picture/2010-05-26/100526105954811.jpg"
                                      alt=""></li>
            <li class="clearfix"><img src="http://img.alimama.cn/bcrm/adboard/picture/2010-06-07/100607113317129.jpg"
                                      alt=""></li>
        </ul>
    </div>
</div>

 

 

js(jquery):

$(function() {
        $("#J_MallPrev").click(function() {
            var l = $(".slider-content ul").css("left");
            l = parseInt(l.slice(0, -2));
            if (l == -440) {
                $(".slider-content ul li:first-child").addClass("mall_rev_last");
            }
            if (l <= -1320) {
                l = 0;
                $(".slider-content ul").css("left", "0");
                $(".slider-content ul li:first-child").removeClass("mall_rev_last");
            }
            $(".slider-content ul").animate({left: (l - 440) + "px"}, { queue: true, duration: 300 });
        });
        $("#J_MallNext").click(function() {
            var l = $(".slider-content ul").css("left");
            l = parseInt(l.slice(0, -2));
            if (l == -440) {
                $(".slider-content ul li:last-child").addClass("mall_next_first");
            }
            if (l >= 440) {
                l = -880;
                $(".slider-content ul").css("left", "-880px");
                $(".slider-content ul li:last-child").removeClass("mall_next_first");
            }
            $(".slider-content ul").animate({left: (l + 440) + "px"}, { queue: true, duration: 300 });
        });
    });

 

 

demo地址：http://xiziyin.appspot.com/demo/slider-2.html 

原理：http://bbs.blueidea.com/thread-2981254-1-9.html