本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考,具体如下:

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

css部分:

<style>
  * {
    padding: 0;
    margin:0;
  }
  ul {
    list-style: none;
  }
  .out {
    width: 640px;
    height: 270px;
    margin:50px auto;
    position: relative;
  }
  .out img{
    width: 640px;
    height: 270px;
  }
  .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>

HTML部分:

<body>
  <div class="out ">
    <ul class="img ">
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="/UploadFiles/2021-04-02/1.jpg ">

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

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

这里使用本站演示图片,构建完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery淡入淡出轮播图</title>
<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>
</head>
<body>
  <div class="out ">
    <ul class="img ">
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="/UploadFiles/2021-04-02/Guardians-of-the-Galaxy-Poster-High-Res.jpg">

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试,可获得如下运行效果:

jQuery实现的淡入淡出图片轮播效果示例

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com