图片轮转

js
/*轮播*/
$(function () {
    var page = 1;
    var i = 4; //每版放4个图片
    var len = $(".scroll_content li").length;
    var page_count = Math.ceil(len / i);   //只要不是整数，就往大的方向取最小的整数
    var none_unit_width = $(".scroll_mod").width(); //获取框架内容的宽度,不带单位
    var $parent = $(".scroll_content");
    //向右 按钮
    $(".main_show_btnr").click(function () {
        if (!$parent.is(":animated")) {
            if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                $parent.animate({ left: 0 }, 800); //通过改变left值，跳转到第一个版面
                page = 1;
            } else {
                $parent.animate({ left: '-=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面
                page++;
            }
        }
    });
    //往左 按钮
    $(".main_show_btnl").click(function () {
        if (!$parent.is(":animated")) {
            if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值，跳转到最后一个版面
                page = page_count;
            } else {
                $parent.animate({ left: '+=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面
                page--;
            }
        }
    });
});
/*轮播*/


/*tab 切换*/
$(function () {
    $(".news_nav li a").each(function (i) {
        $(this).mouseover(function () {
            $(".news_list").hide();
            $(".news_list").eq(i).show();
        });
    });
});
/*tab 切换*/

/*图片切换*/
$(function () {
    var len = $(".num > li").length;
    var index = 0;
    var adTimer;
    $(".num li").mouseover(function () {
        index = $(".num li").index(this);
        showImg(index);
    }).eq(0).mouseover();
    //滑入 停止动画，滑出开始动画.
    $(".news_pic").hover(function () {
        clearInterval(adTimer);
    }, function () {
        adTimer = setInterval(function () {
            showImg(index)
            index++;
            if (index == len) { index = 0; }
        }, 2000);
    }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index) {
    var adHeight = $(".news_pic").width();
    $(".show").stop(true, false).animate({ left: -adHeight * index }, 1000);
    $(".news_pic .num li").removeClass("on")
            .eq(index).addClass("on");
}
/*图片切换*/

 <div class="news_pic">
                        <ul class="show">
                      
                                    <li><a href="#"  target="_blank">
                                        <img src="images/1.JPG">       
                                    </a>         </li>
                                     <li><a href="#"  target="_blank">
                                        <img src="images/2.JPG">       
                                    </a>         </li>
                                     <li><a href="#"  target="_blank">
                                        <img src="images/3.JPG">       
                                    </a>         </li>
                                     <li><a href="#"  target="_blank">
                                        <img src="images/4.JPG">       
                                    </a>         </li>
                        </ul>
                        <ul class="num">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                        </ul>
                    </div>

　　css

.news_pic{
    float:left;
    width: 300px;
    height: 236px;
    overflow:hidden;
    position: relative;
    background:#fff;
    margin-top:2px;

}
.news_pic img{
    padding:5px;
    width: 290px;
    height: 231px;
    display:block;
}

.news_pic .num{
    position:absolute; bottom:5px; right: 5px; 
}
.news_pic .num li{
    float:left; width:15px; height:15px; line-height:15px; text-align:center; border:#fff 1px solid; margin:0 2px; background:#FFF;
    
}
.news_pic .num .on{
    background:#B81B21; color:#FFF; width:15px; height:15px; line-height:15px;
}
.news_pic .show li{
    float:left;
    text-decoration:none;
}
.news_pic .show{
    position:absolute;
    height:240px;
    width:99999px;

}
.news_pic li{
list-style-type:none;

}