jQuery制作无缝轮播

来源：互联网发布：西北师大知行学院贴吧编辑：程序博客网时间：2024/04/30 11:14

首先在工程中添加jQuery静态资源库。

 <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

制作轮播图界面：

<body><div class="banner">    <ul class="img">        <li><a href="#"><img src="images/1.jpg"></a></li>        <li><a href="#"><img src="images/2.jpg"></a></li>        <li><a href="#"><img src="images/3.jpg"></a></li>        <li><a href="#"><img src="images/4.jpg"></a></li>    </ul>    <ul class="num">            </ul>    <div class="btn btn_l">&lt;</div>    <div class="btn btn_r">&gt;</div></div>

制作轮播图样式：

<style>*{ padding:0; margin:0; list-style:none;}.banner{ margin:100px auto; border:5px solid #000; width:550px; height:300px; overflow:hidden; position:relative;}.banner .img{ width:5000px; position:absolute; left:0px; top:0;}.banner .img li{ float:left;}.banner .num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size:0px;}.banner .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;}.banner .num li.on{ background:#F60;}.banner .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋体"; display:none;}.banner:hover .btn{ display:block;}.banner .btn_l{ left:0;}.banner .btn_r{ right:0;}</style>

在（type=”text/javascript”） js中实现轮播图的原理：

<script type="text/javascript">$(function(){    var i=0;    var clone=$(".banner .img li").first().clone();    $(".banner .img").append(clone);       var size=$(".banner .img li").size();      for(var j=0;j<size-1;j++){        $(".banner .num").append("<li></li>");    }    $(".banner .num li").first().addClass("on");    /*鼠标划入圆点*/    $(".banner .num li").hover(function(){        var index=$(this).index();        i=index;        $(".banner .img").stop().animate({left:-index*550},500)            $(this).addClass("on").siblings().removeClass("on")            })    /*自动轮播*/    var t=setInterval(function(){        i++;        move()    },2000)    /*对banner定时器的操作*/    $(".banner").hover(function(){        clearInterval(t);    },function(){        t=setInterval(function(){            i++;            move()        },2000)    })    /*向左的按钮*/    $(".banner .btn_l").click(function(){        i++        move();     })    /*向右的按钮*/    $(".banner .btn_r").click(function(){        i--        move()                  })    function move(){        if(i==size){            $(".banner  .img").css({left:0})                       i=1;        }        if(i==-1){            $(".banner .img").css({left:-(size-1)*550})            i=size-2;        }        $(".banner .img").stop().animate({left:-i*550},500)            if(i==size-1){            $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on")         }else{                  $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on")         }    }})</script>

希望本文章对需要此功能的朋友有帮助，欢迎多多指教，本菜鸟将陆续分享自己学习JQuery的知识点根大家共勉，欢迎多多指教，不喜勿喷。

0 0