jquery 实现淡入淡出图片轮播效果

最新推荐文章于 2019-12-13 11:10:37 发布

zxz32384

最新推荐文章于 2019-12-13 11:10:37 发布

阅读量1w

点赞数 2

分类专栏： js html jquery 文章标签： jquery

本文链接：https://blog.csdn.net/u013993319/article/details/51898419

版权

js 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）

 <style>
    * {
        padding: 0;
        margin:0;
    }
    ul {
        list-style: none;
    }
    .out {
        width: 640px;
        height: 270px;
        margin:50px auto;
        position: relative;
    }
    .out .img li {
        position: absolute;
        left:0;
        top:0;
        display: none;
    }
    .out .num {
        position: absolute;
        bottom: 20px;
        left: 0;
        font-size:0px;
        text-align:center;
        width: 100%;
    }
    .out .num li {
        width: 20px;
        height: 20px;
        line-height:20px;
        border-radius:50%;
        background:#666;
        color: #fff;
        text-align:center;
        display: inline-block;
        font-size:16px;
        margin:0 3px;
        cursor: pointer;
    }
    .out .num li.active {
        background:#a00;
    }
    .out .btn {
        position:absolute;
        top: 50%;
        margin-top:-30px;
        width: 30px;
        height: 60px;
        line-height:60px;
        background:rgba(0, 0, 0, 0.5);
        font-size:40px;
        color: #fff;
        text-align:center;
        display: none;
    }
    .out .left {
        left: 0;
    }
    .out .right {
        right: 0;
    }
    .out:hover .btn {
        display: block;
        cursor: pointer;
    }
    </style>
<body>
    <div class="out ">
        <ul class="img ">
            <li>
                <a href="# ">
                    <img src="image/1.jpg " alt=" ">
                </a>
            </li>
            <li>
                <a href="# ">
                    <img src="image/2.jpg " alt=" ">
                </a>
            </li>
            <li>
                <a href="# ">
                    <img src="image/3.jpg " alt=" ">
                </a>
            </li>
            <li>
                <a href="# ">
                    <img src="image/4.jpg " alt=" ">
                </a>
            </li>
            <li>
                <a href="# ">
                    <img src="image/5.jpg " alt=" ">
                </a>
            </li>
        </ul>
        <ul class="num ">
        </ul>
        <div class="left btn ">
            <</div>
                <div class="right btn ">></div>
        </div>
</body>

juery代码实现图片的自动轮播和手动轮播效果

      <script type="text/javascript" src="JS/jquery.js"></script>
    <script type="text/javascript">
  $(function() {

     //代码初始化
        var size=$(".img li").size();
        for (var i = 1; i <= size; i++) {
            var li="<li>"+i+"</li>";
            $(".num").append(li);
        };

        //手动控制轮播效果
        $(".img li").eq(0).show();
        $(".num li").eq(0).addClass("active");
        $(".num li").mouseover(function() {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            i=index;
            $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
        })

        //自动
        var i = 0;
        var t = setInterval(move, 1500);
        //核心向左的函数
        function moveLeft() {
            i--;
            if (i == -1) {
                  i = size-1;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

        }
        //核心向右的函数
        function move() {
            i++;
            if (i == size) {
                i = 0;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

        }
        //定时器的开始与结束
        $(".out").hover(function() {
            clearInterval(t);
        }, function() {
            t = setInterval(move, 1500)
        })
        //左边按钮的点击事件
        $(".out .left").click(function() {
            moveLeft();
        })
        //右边按钮的点击事件
        $(".out .right").click(function() {
            move();
        })
    })
</script>

zxz32384

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
jquery 实现淡入淡出图片轮播效果

1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）<body> <div class="out "> <ul class="img "> <li> <a href="# "> <img src="image/1.jpg " alt=" ">
复制链接

扫一扫