首页
   /       /   
jquery学习之自动轮播
11月
7
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>
本文标签:标签: jQuery 轮播图
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号
sitemap