demo--图片渐隐渐现轮播（jQuery）

程序员文章站 2022-05-02 20:49:34

...

demo--图片渐隐渐现轮播（jQuery）
因为背景图大小是760300 所以最外容器也设置为760300

自己写的样式即css和老师写的不太一样

一.自己写的css、html和js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        img {
            border: none;
            display: block;
            height:100%;
            width:100%;
        }

        .clearfix {
            content: '';
            display: block;
            clear: both;
        }

        #slideshow {
            width: 760px;
            height: 300px;
            margin: 60px auto;
            position: relative;
            overflow: hidden;
            left: 0;
            top: 0;
        }

        #slideshow .pic {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #slideshow .pic li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #slideshow .pic li .img1 {
            position: absolute;
            left: -760px;
            top: 0;
            width:100%;
        }

        #slideshow .pic li .img2 {
            position: absolute;
            left: -20px;
            top: 0;
            display: none;
            width:100%;
        }

        #slideshow .nav {
            /* width: 100%; */
            position: absolute;
            right: 30px;
            bottom: 30px;
            display: flex;
        }

        #slideshow .nav li {
            margin-left: 8px;
            width: 10px;
            height: 10px;
            border: 3px solid rgb(9, 116, 255);
            border-radius: 50%;


        }

        #slideshow .nav li.active {
            background: rgb(94, 247, 226);
        }
    </style>
</head>

<body>
    <!-- html  slideshow 轮播图-->
    <div id="slideshow">
        <ul class="pic">
            <li style="background: url(./img/bg1.jpg);">
                <img class="img1" src="./img/text1.png" alt="">
                <img class="img2" src="./img/con1.png" alt="">
            </li>
            <li style="background: url(./img/bg2.jpg);">
                <img class="img1" src="./img/text2.png" alt="">
                <img class="img2" src="./img/con2.png" alt="">
            </li>
            <li style="background: url(./img/bg3.jpg);">
                <img class="img1" src="./img/text3.png" alt="">
                <img class="img2" src="./img/con3.png" alt="">
            </li>
            <li style="background: url(./img/bg4.jpg);">
                <img class="img1" src="./img/text4.png" alt="">
                <img class="img2" src="./img/con4.png" alt="">
            </li>
            <li style="background: url(./img/bg5.jpg);">
                <img class="img1" src="./img/text5.png" alt="">
                <img class="img2" src="./img/con5.png" alt="">
            </li>
        </ul>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!-- js -->
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            // 最开始要展示的
            $('.pic li').eq(0).find('img1').stop().animate({left:0},800)
            .next().stop().show().animate({left:0},800);

            // 后来定时轮播展示的
            var i=0;
            setInterval(function(){
                i++;
                if(i==$('.pic li').length){
                    i=0;
                }
                $('.pic li').eq(i).fadeIn().find('.img1').stop().animate({left:0},800)
                .next().stop().show().animate({left:0},800)
                .end().end()
                .siblings().fadeOut().find('.img1').css({left:"-800px"})
                .next().hide().css({left:"-20px"});

                // 圆点跟随图片的移动而移动
                $('.nav li').eq(i).addClass('active')
                .siblings().removeClass('active');
            },2000);
        });
    </script>
</body>

</html>

二.老师的css、html和js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      ul li {
        list-style: none;
      }

      #main {
        width: 760px;
        height: 300px;
        position: relative;
        margin: 50px auto;
      }

      #main .pic {
        width: 760px;
        height: 300px;

        overflow: hidden;
      }
      #main .pic ul li {
        width: 760px;
        height: 300px;
        position: relative;
      }
      #main .pic ul li .img1 {
        position: absolute;
        top: 0;
        left: -760px;
      }
      #main .pic ul li .img2 {
        position: absolute;
        top: 0;
        left: -20px;
        display: none;
      }
      #main .nav {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }
      #main .nav ul li {
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        float: left;
        margin-left: 5px;
      }
      #main .nav ul li.select {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="pic">
        <ul>
          <li style="background: url(img/bg1.jpg);">
            <img class="img1" src="img/text1.png" />
            <img class="img2" src="img/con1.png" />
          </li>
          <li style="background: url(img/bg2.jpg);">
            <img class="img1" src="img/text2.png" />
            <img class="img2" src="img/con2.png" />
          </li>
          <li style="background: url(img/bg3.jpg);">
            <img class="img1" src="img/text3.png" />
            <img class="img2" src="img/con3.png" />
          </li>
          <li style="background: url(img/bg4.jpg);">
            <img class="img1" src="img/text4.png" />
            <img class="img2" src="img/con4.png" />
          </li>
          <li style="background: url(img/bg5.jpg);">
            <img class="img1" src="img/text5.png" />
            <img class="img2" src="img/con5.png" />
          </li>
        </ul>
      </div>
      <div class="nav">
        <ul>
          <li class="select"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div style="width: 100px; height: 100px; background: red; display: none;"></div>
    <script
      src="js/jquery-1.11.3.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script type="text/javascript">
      $(function () {
        $(".pic li")
          .eq(0)
          .find(".img1")
          .stop()
          .animate({ left: 0 }, 800)
          .next()
          .stop()
          .show()
          .animate({ left: 0 }, 800);
        var i = 0;
        setInterval(function () {
          i++;
          if (i == $(".pic li").length) {
            i = 0;
          }
          $(".pic li")
            .eq(i)
            .fadeIn()
            .find(".img1")
            .stop()
            .animate({ left: 0 }, 800)
            .next()
            .stop()
            .show()
            .animate({ left: 0 }, 800)
            .end()
            .end()
            .siblings()
            .fadeOut()
            .find(".img1")
            .css({ left: "-760px" })
            .next()
            .hide()
            .css({ left: "-20px" });

          $(".nav li")
            .eq(i)
            .addClass("select")
            .siblings()
            .removeClass("select");
        }, 2000);
      });
    </script>
  </body>
</html>

demo--图片渐隐渐现轮播（jQuery）

一.自己写的css、html和js

二.老师的css、html和js

使用JQuery实现图片轮播效果

基于jQuery图片轮播

jQuery实现的3D版图片轮播示例【滑动轮播】

jQuery实现的网站banner图片无缝轮播效果完整实例

jquery实现图片轮播器

jquery图片轮播插件仿支付宝2013版全屏图片幻灯片

JQuery实现图片轮播效果

用jQuery实现圆点图片轮播效果

JQuery 图片滚动轮播示例代码

jQuery实现的网站banner图片无缝轮播效果完整实例