jQuery制作无缝轮播

最新推荐文章于 2024-03-14 19:48:19 发布

skye iOS????

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量253

点赞数

分类专栏： jQuery 文章标签： jquery 界面库

本文链接：https://blog.csdn.net/qq_32190375/article/details/53418951

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先在工程中添加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的知识点根大家共勉，欢迎多多指教，不喜勿喷。

skye iOS????

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery制作无缝轮播

首先在工程中添加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="#"><i
复制链接

扫一扫

专栏目录