最简单的jquery轮播图

css部分

<style type="text/css">
    body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
    h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
    body>div{margin:0 auto}
    body{background:#D40000}
    div {text-align:left}
    a img {border:0}
    body { color: #333; text-align: center; font: 12px "微软雅黑"; }
    ul, ol, li {list-style-type:none;vertical-align:0}
    a {outline-style:none;color:#535353;text-decoration:none}
    a:hover { color: #D40000; text-decoration: none}

    #main{width:920px;height:430px;overflow:hidden;position:relative;margin:0px auto;}
    #main .box{width:820px;height:430px;box-shadow:0px 0px 5px #ddd;margin:0px auto;overflow:hidden;position:relative;}
    #main .box img{width:820px;height:430px;position:absolute;left:0px;top:0px;opacity:0;filter:alpha(opacity=0);}
    #main .btnLeft{width:35px;height:57px;position:absolute;left:0px;top:185px;background:url("http://www.internetke.com/jsEffects/2015050702/images/left_ar.png") no-repeat 0px 0px;}
    #main .btnRight{width:35px;height:57px;position:absolute;right:0px;top:185px;background:url("http://www.internetke.com/jsEffects/2015050702/images/right_ar.png") no-repeat 0px 0px;}
    #main .page{width:132px;height:22px;position:absolute;bottom:15px;right:50px;line-height: 24px;}
    #main .page a{display:inline-block;width:22px;height:22px;background:url("http://www.internetke.com/jsEffects/2015050702/images/num_grey.png") no-repeat 0px 0px;margin:0px 11px;float:left;color:#FFF;text-decoration:none;text-align:center;}
    #main  .page a.active{background:url("http://www.internetke.com/jsEffects/2015050702/images/num_red.png") no-repeat 0px 0px;}
</style>

html部分

<div class="kePublic">
    <!--效果html开始-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){

            var aPage = $('#main .page a');        //分页按钮
            var aImg = $('#main .box img');        //图像集合
            var iSize = aImg.size();        //图像个数
            var index = 0;        //切换索引
            var t;
            $('#btnLeft').click(function(){        //左边按钮点击
                index--;
                if(index<0){
                    index=iSize-1
                }
                change(index)
            })
            $('#btnRight').click(function(){    //右边按钮点击
                index++;
                if(index>iSize-1){
                    index=0
                }
                change(index)
            })
            //分页按钮点击
            aPage.click(function(){
                index = $(this).index();
                change(index)
            });
            //切换过程
            function change(index){
                aPage.removeClass('active');
                aPage.eq(index).addClass('active');
                aImg.stop();
                //隐藏除了当前元素，所以图像
                aImg.eq(index).siblings().animate({
                    opacity:0
                },1000)
                //显示当前图像
                aImg.eq(index).animate({
                    opacity:1
                },1000)
            }


            function autoshow() {
                index=index+1;
                if(index<=iSize-1){
                    change(index);
                }else{
                    index=0;
                    change(index);
                }

            }
            int=setInterval(autoshow,3000);
            function clearInt() {
                $('#btnLeft,#btnRight,.page a').mouseover(function() {
                    clearInterval(int);
                })

            }
            function setInt() {
                $('#btnLeft,#btnRight,.page a').mouseout(function() {
                    int=setInterval(autoshow,3000);
                })
            }
            clearInt();
            setInt();
        })
    </script>
    <div id="main">
        <a class="btnLeft" id="btnLeft" href="javascript:void(0);"></a>
        <a class="btnRight" id="btnRight" href="javascript:void(0);"></a>
        <div class="box">
            <img style="opacity:1;filter:alpha(opacity=100);" src="http://www.internetke.com/jsEffects/2015050702/images/intro1.jpg" />
            <img src="http://www.internetke.com/jsEffects/2015050702/images/intro2.jpg" />
            <img src="http://www.internetke.com/jsEffects/2015050702/images/intro3.jpg" /> </div>
        <div class="page">
            <a class="active" href="javascript:void(0);">1</a>
            <a href="javascript:void(0);">2</a> <a href="javascript:void(0);">3</a>
        </div>
    </div>
</div>

js部分

<script type="text/javascript">
        $(function(){

            var aPage = $('#main .page a');        //分页按钮
            var aImg = $('#main .box img');        //图像集合
            var iSize = aImg.size();        //图像个数
            var index = 0;        //切换索引
            var t;
            $('#btnLeft').click(function(){        //左边按钮点击
                index--;
                if(index<0){
                    index=iSize-1
                }
                change(index)
            })
            $('#btnRight').click(function(){    //右边按钮点击
                index++;
                if(index>iSize-1){
                    index=0
                }
                change(index)
            })
            //分页按钮点击
            aPage.click(function(){
                index = $(this).index();
                change(index)
            });
            //切换过程
            function change(index){
                aPage.removeClass('active');
                aPage.eq(index).addClass('active');
                aImg.stop();
                //隐藏除了当前元素，所以图像
                aImg.eq(index).siblings().animate({
                    opacity:0
                },1000)
                //显示当前图像
                aImg.eq(index).animate({
                    opacity:1
                },1000)
            }


            function autoshow() {
                index=index+1;
                if(index<=iSize-1){
                    change(index);
                }else{
                    index=0;
                    change(index);
                }

            }
            int=setInterval(autoshow,3000);
            function clearInt() {
                $('#btnLeft,#btnRight,.page a').mouseover(function() {
                    clearInterval(int);
                })

            }
            function setInt() {
                $('#btnLeft,#btnRight,.page a').mouseout(function() {
                    int=setInterval(autoshow,3000);
                })
            }
            clearInt();
            setInt();
        })
    </script>