jqery 图片切换效果

 

---

 

 

HTML：

<div id="showTempl" class="item">
    <div class="item-title">
        <span class="item-title-head"></span>模板展示<a href="#">更多</a></div>
    <div class="item-content">
        <div id="silder">
            <div class="showleft_bg">
                <a id="show_left" href="javascript:void(0);"></a>
            </div>
            <div class="sildercontent">
                <div id="imgSilder">
                    <div id="imgConta">
                        <ul>
                            <li>
                                <img src="images/show1.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show1.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show1.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show2.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show2.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show2.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show1.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show2.jpg" /><a href="#">asdfasdfwef</a> </li>
                            <li>
                                <img src="images/show1.jpg" /><a href="#">asdfasdfwef</a> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="showright_bg">
                <a id="show_right" href="javascript:void(0);"></a>
            </div>
        </div>

---

CSS:

 

#showTempl .item-content{ width:700px; height:201px; overflow:hidden; background:url(img/show_bg.png) no-repeat;}
#show_left{height:201px; display:block; width:34px; vertical-align:middle; background:url(img/show-left.gif) no-repeat left 30%;}
#show_left:hover{ background:url(img/show-left-hover.gif) no-repeat left 30%;}
#show_right{height:201px; display:block; width:34px; vertical-align:middle;background:url(img/show-right.gif) no-repeat right 30%;}
#show_right:hover{ background:url(img/show-right-hover.gif) no-repeat right 30%;}

#showTempl ul{ padding-left:3px; height:201px; overflow:hidden;}
#showTempl ul li{ padding:0 15px; display:inline; text-align:center; float:left; border:none; height:201px; overflow:hidden;}
#showTempl ul li a{ display:block;}

#imgSilder{width:632px; height:201px; overflow:hidden; position:relative;}
#imgConta{ position:absolute; width:3000px;}
#silder .showleft_bg{ float:left;}
#silder .showright_bg{ float:right;}
#silder .sildercontent{width: 632px; float: left; overflow: hidden;}

---

 

JS代码：

 

<script type="text/javascript">
$(function() {
    var page = 1;
    var i = 3;
    var len = $("#showTempl ul li").length;
    var page_count = Math.ceil(len / i);
    var none_unit_width = $("#imgSilder").width();
    var $parent = $("#imgConta");
    $("#show_left").hover(
        function() { clearInterval(xx); }
        , function() { xx = window.setInterval(function() { $("#show_left").click(); }, 3000); }
    );
    $("#show_left").click(function() {
        if (!$parent.is(":animated")) {
            if (page == page_count) {
                $parent.animate({ left: 0 }, 1400);
                page = 1;
            } else {
                $parent.animate({ left: '-=' + none_unit_width }, 1400);
                page++;
            }
        }
    });
    $("#show_right").hover(
        function() { clearInterval(xx); }
        , function() { xx = window.setInterval(function() { $("#show_right").click(); }, 3000); }
    );
    $("#show_right").click(function() {
        if (!$parent.is(":animated")) {
            if (page == 1) {
                $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 1400);
                page = page_count;
            } else {
                $parent.animate({ left: '+=' + none_unit_width }, 1400);
                page--;
            }
        }
    });

    $(".sildercontent").hover(
        function() { clearInterval(xx); }
        , function() { xx = window.setInterval(function() { $("#show_left").click(); }, 3000); }
    );

    var xx = window.setInterval(function() { $("#show_left").click(); }, 3000);
});
</script>