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

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 class="right btn ">>div>
        div>
body>

  1. 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="
  • "+i+"
  • "
    ; $(".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>

    你可能感兴趣的:(js,html,jquery)