用jq简单的去做一个轮播图

在生活中我们会经常去在淘宝上购买商品，网页上有一个可以滑动的图片今天我们用jq去做一个轮播图

我们先做好一个盒子和轮播图的一个框架

<div class="zt">

        <div class="zy">左移动</div>

        <div class="tp">

            <img src="img/1.jpg" alt="">

        </div>

        <div class="yy">右移动</div>

        <div class="yq">

            <div class="a1"></div>

            <div class="a1"></div>

            <div class="a1"></div>

            <div class="a1"></div>

        </div>

    </div>

然后我们再把图片导入进去可以把需要的图片也可以加在里面

var img=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']

        然后给图片定义一个变量方便点击移动的效果

var a = 0;

        tbu(0)

        //左移

        $('.zy').click(function(){

            a--;

            if(a<0){

                a=3;    

            }

            $('img').attr('src',img[a])

            tbu(a)

        })

        //右移

        $('.yy').click(function(){

            a++;

            if(a>3){

                a=0;    

            }

            $('img').attr('src',img[a])

            tbu(a)

        })

在图片下面还有一些小圆点也可以切图我们去做到圆点的切图，然后给小圆点点击以后加入对于图片的效果色

 $('.a1').click(function(){

            a=$(this).index()

            $('img').attr('src',img[a])

            $(".a1").css('background-color','#999')          

            $(this).css('background-color','red')

                   })

  function tbu(o){

            $('img').eq(o).fadeIn(1000).siblings("img").fadeOut(500)

            $('.a1').eq(o).css('background-color','red').siblings().css('background-color','#999')

        }

最后给图片加上定时器让图片可以自动的切换

 setInterval(function(){

            a++

            if(a>3){

                a=0

            }

            $('img').attr('src',img[a])

            tbu(a)

        },3000)