jQuery Carousel Demo — 基于jQuery的焦点轮播demo

最新推荐文章于 2022-02-25 15:12:00 发布

cocotsau

最新推荐文章于 2022-02-25 15:12:00 发布

阅读量2.5k

点赞数

分类专栏： javaScript 文章标签： javascript jquery 焦点轮播 banner

本文链接：https://blog.youkuaiyun.com/perhapschen/article/details/51281064

版权

javaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用jQuery实现一个焦点轮播demo，包括CSS样式、jQuery代码和HTML结构的详细说明，附带项目截图，旨在帮助初学者掌握jQuery轮播效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于jQuery的焦点轮播demo

jQuery Carousel Demo

最近在学习javaScript最流行之一的类库：jQuery，学习之余，写了项目中经常会用到的焦点轮播，请直接看下面代码。

*{
    margin:0;
    padding:0;
    list-style:none;
}
img{
    border:none;
}
#banner{
    height:320px;
    width:852px;
    position:relative;
    margin:30px auto;
}
.imgs li{
    height:320px;
    width:852px;
    position:absolute;
    left:0;
    top:0;
}
.nav{
    position:absolute;
    bottom:15px;
    right:15px;
}
.nav li{
    width:20px;
    height:20px;
    opacity:0.6;
    background:#fff;
    color:#000;
    border:1px solid #000;
    font:bold 12px 'Microsoft Yahei';
    text-align:center;
    line-height:20px;
    margin-left:2px;
    float:left;
    cursor:pointer;
}
.nav li.cur{
    background:#000;
    border:1px solid #fff;
    color:#fff;
}

jQuery部分

$(function(){
    var sColor='0123456789ABCDEF',
    iColor=sColor.length,
    fnRan=function(){
        return ~~(Math.random()*iColor);
    },
    fnColor=function(){//为了演示方便，这里封装一个生成随机颜色的函数
        var s='#';
        for(var i=0;i<6;i++){
            s += sColor[fnRan()];
        }
        return s;
    };

    var navLi = $('#banner .nav li'),  //导航

    imgsLi = $('#banner .imgs li'),   //图片

    duration = 2000,                //停留时间ms

    timer = null;                  //定时器

    imgsLi.each(function(){
        $(this).css('background',fnColor());
    }); 
    imgsLi.hide().eq(0).show();//图片初始化  
    navLi.removeClass('cur').eq(0).addClass('cur');//导航初始化      
    function next(){
        var index = $("#banner .nav li.cur").prevAll().length;//索引
        if(index == navLi.length-1){
            navLi.removeClass('cur').eq(0).addClass('cur');
            imgsLi.fadeOut().eq(0).fadeIn();
        }
        else{
            navLi.removeClass('cur').eq(index+1).addClass('cur');
            imgsLi.fadeOut().eq(index+1).fadeIn();          
        }
    }   
    timer = setInterval(function(){next()},duration)            
    navLi.click(function(){
        if($(this).hasClass("cur"))return false;//屏蔽多次点击
        var index = $(this).prevAll().length;//索引
        navLi.removeClass('cur').eq(index).addClass('cur');
        imgsLi.fadeOut().eq(index).fadeIn();        
    });
    $('#banner').mouseover(function(){clearInterval(timer)});
    $('#banner').mouseout(function(){timer=setInterval(function(){next()},duration)});

});

HTML部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基于jQuery的焦点轮播</title>

<!--当然别忘了引用jquery-->
<script src='http://libs.baidu.com/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<div id="banner">

<!--为了演示方便，这里预先放置了部分内容，在实际的项目中可以动态创建-->
    <ul class="imgs">
        <li>我是1111</li>
        <li>我是2222</li>
        <li>我是3333</li>
        <li>我是4444</li>
        <li>我是5555</li>
    </ul>
    <ul class="nav">
        <li class='cur'>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>