jquery学习之自动轮播

首页

随手笔记

jquery学习之自动轮播

11月

jquery学习之自动轮播

作者： 大彭Sir 分类： 随手笔记 正在检查是否收录...

效果图

请看本站首页轮播图，本人较懒没有写图片轮播的动画效果，需要更多动画效果的可以自己写！

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客轮播</title>
</head>
<style>
    #ad{
        width:100%;
        display: flex;
        height: 260px;
        z-index: 1;
        box-shadow: #ddd 1px 1px 5px;
    }
    .lb{
        display: none;
        width: 100%;
        height: 260px;
    }
    .li{
        width: 15px;
        height: 15px;
        line-height: 15px;
        list-style: none;
        text-align: center;
        color:rgb(8, 152, 212);
        border: paleturquoise 1px solid;
        border-radius: 50%;
        padding: 3px;
        z-index: 2;
        margin-right: 5px;
    }
    .id{
        background: paleturquoise;
    }
    .ceng{
        display: flex;
        float: right;
        margin-top: -40px;
        margin-right: 20px;
    }
</style>
<body>
<div id="ad">
    <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunbo.jpg"/>
    <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboii.jpg"/>
    <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboiiii.jpg"/>
</div>
<div class="ad">
        <ol class="ceng">
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
        </ol>
</div>
</body>
<script src="../jquery.min.js"></script>//这里引入jquery文件，自己去官网下载引入！
<script>
     $('#ad .lb').eq(0).show();//显示第一张图
     $('.ad .li').eq(0).addClass('id');//显示第一个指示点
    for(var i=0;i<$('.ad li').length;i++){
        $('.ad .li').eq(i).attr('abc',i);
    }
    var runs = setInterval(run,3000);//设置轮播时长
    var num = 0;//初始化
    function run(){
        $('#ad .lb').eq(num).hide();   //隐藏上一张图片
        $('.ad .li').removeClass('id');  //删除一个指示点样式
        num++;
        $('.ad .li').eq(num).addClass('id');//添加一个指示点样式
        $('#ad .lb').eq(num).slideDown(1000);//显示下一张图片
        if(num>=$('.ad .li').length-1){
            num=-1;
        }
    }
    $('.ad .li').mouseover(function(){
        $('.ad li').removeClass('id');   //添加一个指示点样式
        $(this).addClass('id');          //删除一个指示点样式
        $('#ad .lb').hide();
        $('#ad .lb').eq($(this).attr('abc')).show();
        clearInterval(runs);            //停止轮播
    })
    $('.ad .li').mouseout(function(){
        runs = setInterval(run,3000);   //重新设置轮播时长
        num = $(this).attr('abc');      //获取列表的排序
    })
</script>
</html>