当前位置： 移动技术网 > IT编程>开发语言>Jquery > JQuery 轮播图

JQuery 轮播图

2019年12月18日  | 移动技术网IT编程  | 我要评论

jquery轮播图

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jq轮播图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    #center {
        width: 800px;
        height: 600px;
        margin: auto;
        background-color: black;
        /*作为ul定位的父级*/
        position: relative;
    }
    #center:hover #ul1{
        display: block;
    }
    /*左右箭头*/
    #ul1 {
        position: relative;
        top: 40%;
        display: none;
    }
    #ul1 li {
        font-size: 80px;
        color: white;
    }
    /*四个点*/
    #ul2 {
        position: absolute;
        top: 92%;
        left: 40%;
    }
    #ul2 li {
        width: 20px;
        height: 20px;
        border: 3px slateblue solid;
        /*透明度*/
        opacity: 0.7;
        /*将li的边框设置为圆*/
        border-radius: 50%;
        float: left;
        margin-left: 10px;
        position: relative;
    }
    #ul1 li:hover {
        color: aqua;
    }
    #ul2 li:hover {
        background-color: darkseagreen;
    }
    #imgs li{
        /*定位使四张图片重叠在一起*/
        position: absolute;
    }
    .on{
        background-color: darkseagreen;
    }
</style>
<body>
<div id="center">
    <ul id="imgs">
        <li><a href="javascript:void(0)"><img src="http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg"></a></li>
        <li><a href="javascript:void(0)"><img src="http://www.datongchun.com/upload/image/20150817101824_89175.jpg" ></a></li>
        <li><a href="javascript:void(0)"><img src="http://img2.imgtn.bdimg.com/it/u=1563165482,1097507544&fm=214&gp=0.jpg" ></a></li>
        <li><a href="javascript:void(0)"><img src="http://hiphotos.baidu.com/%d4%c6%c8%b8%b5%c4%b3%e7%b0%dd%d5%df/pic/item/c6ba270b9a23e670e9248891.jpg"></a></li>
    </ul>
    <ul id="ul1">
        <li><span style="float:left" >&lt;</span></li>
        <li><span style="float: right" >&gt;</span></li>
    </ul>
    <ul id="ul2">
        <li class="li_dot"></li>
        <li class="li_dot"></li>
        <li class="li_dot"></li>
        <li class="li_dot"></li>
    </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    // 获取图片
    var imgs = $("#imgs li");
    // 获取箭头
    var change = $("#ul1 li");
    // 获取圆点
    var li_dot = $("#ul2 li");
    // 图片数量
    var len = imgs.length;
    //  当前图片的索引
    var first =0;
    var timer;
    // 圆点点击事件
    li_dot.click(function () {
        var num = $(this).index();
        if(num != first){
            ani(num);
        }
    });
    // 箭头点击事件
    change.click(function () {
        // 当前图片的索引
        var num = first;
        if($(this).index()){
            // 向右翻图
            num ++;
            // 图片数量的余数即为索引
            num %= len;
        }else {
            // 向左翻图
            num --;
            //当索引小于0时，从最后一张开始
            if (num<0) num=len-1;
        }
        ani(num);
    });
    // 变化函数
    function ani(num) {
        //将之前的图片，去除样式和隐藏
        li_dot.eq(first).removeclass("on");
        imgs.eq(first).fadeout(800);
        //对现在选中的图片，增加样式和显示
        first = num;
        li_dot.eq(first).addclass("on");
        imgs.eq(first).fadein(800);
    }
    // 定时器：轮播
    function auto() {
        timer = setinterval(function () {
            var num = first;
            num++;
            num %= len;
            ani(num);
        },2000)
    }
    // 清除轮播：鼠标移上去时，停止轮播,移开时，继续轮播
    $("#center").hover(function () {
        clearinterval(timer);
    },auto);

    // 隐藏所有图片，并只显示第一张图片
    imgs.hide().eq(0).show();
    //添加 class：on，表示选中
    li_dot.eq(0).addclass("on");
    //定时轮播
    auto();
</script>
</body>
</html>




您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网