用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

皇家    -  云代码空间

——

基于jquery实现简单轮播图效果

2022-08-16|168阅||

摘要:本文使用jquery实现轮播图效果,供大家参考,具体内容如下首先上效果上代码html<div id="main"> <div class="pic"> <

本文使用jquery实现轮播图效果,供大家参考,具体内容如下

首先上效果

上代码

html


<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>

css代码

<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;
    }

js代码

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云代码。
顶 0踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 皇家
    • 等级: 中级程序员
    • 积分: 245
    • 代码: 0 个
    • 文章: 5 篇
    • 随想: 0 条
    • 访问: 1 次
    • 关注

    人气代码

      最新提问

        站长推荐