用jquery简单的实现京东轮播图效果

小灰灰 2022-12-15 14:06 159阅读 0赞

用jquery简单的实现京东轮播图效果\#\# 标题

html部分

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      <div class="slider">
        <ul>
          <li>
            <a href="#">
              <img src="images/1.jpg" alt="">
              <p>这是第1张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/2.jpg" alt="">
              <p>这是第2张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/3.jpg" alt="">
              <p>这是第3张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/4.jpg" alt="">
              <p>这是第4张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/5.jpg" alt="">
              <p>这是第5张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/6.jpg" alt="">
              <p>这是第6张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/7.jpg" alt="">
              <p>这是第7张图片的文字说明</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/8.jpg" alt="">
              <p>这是第8张图片的文字说明</p>
            </a>
          </li>
        </ul>
        
        <div class="arrow">
          <span class="arrow-left"><</span>
          <span class="arrow-right">></span>
        </div>
      </div>
    </body>
    </html>

css部分

<style>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
        img {
          display: block;
        }
    
        .slider {
          height: 340px;
          width: 790px;
          margin: 100px auto;
          position: relative;
          overflow: hidden;
        }
    
        .slider li {
          position: absolute;
          display: none;
        }
    
        .slider li:first-child {
          display: block;
        }
    
        /*文字部分的样式*/
    
        .slider li p {
          position: absolute;
          width: 100%;
          padding: 10px 0;
          text-indent: 2em;
          background-color: rgba(0, 0, 0, .6);
          bottom: 0;
          left: 0;
          font-size: 18px;
    
          /*给文字设置位移到底部去*/
          transform: translate3d(0, 100%, 0);
          /*添加过渡*/
          transition: all .8s;
        }
    
        /*当前展示li 下的文字样式*/
    
        .slider li.current p {
          /*文字位移到0的位置，正常显示*/
          transform: translate3d(0, 0, 0);
        }
    
        .slider li a {
          color: #fff;
        }
    
        .arrow {
          display: none;
        }
    
        .slider:hover .arrow {
          display: block;
        }
    
        .arrow-left,
        .arrow-right {
          font-family: "SimSun", "宋体";
          width: 30px;
          height: 60px;
          background-color: rgba(0, 0, 0, 0.1);
          position: absolute;
          top: 50%;
          margin-top: -30px;
          cursor: pointer;
          text-align: center;
          line-height: 60px;
          color: #fff;
          font-weight: 700;
          font-size: 30px;
        }
    
        .arrow-left:hover,
        .arrow-right:hover {
          background-color: rgba(0, 0, 0, .5);
        }
    
        .arrow-left {
          left: 0;
        }
    
        .arrow-right {
          right: 0;
        }
      </style>

js部分

<script src="../jquery-2.2.4.js"></script>
    <script>
      //1 定义一个索引，且设置地张图片为默认
      var index = 0;
      $('ul>li').eq(index).addClass('current').siblings().removeClass('current');
    
      // 2右边按钮的点击
      $('.arrow-right').click(function () {
        index++;
        // 判断图片是否超过最后一张，超过就重新给index赋值
        if (index == $('ul>li').length) {
          index = 0;
        }
      showimg();
      });
    
      // 左边按钮的实现
      $('.arrow-left').click(function () {
        index--;
        if (index < 0) index = $('ul>li').length - 1;
       showimg();
      })
    
      //封装一个函数，设置当前图片显示，其他隐藏
      function showimg() {
        $('ul>li').eq(index).addClass('current').focusin.siblings().removeClass('current').fadeOut();
      }
    
      // 实现自动轮播
      var time = '';
    
      // 鼠标移入停止轮播
      $('.slider').mouseover(function () {
        clearInterval(time)
      })
    
      // 鼠标移出，继续
      $('.slider').mouseout(function () {
        time = setInterval(function () {
          $('.arrow-right').click()
        }, 2000)
      });
    
      $('.slider').mouseout()
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现简单的轮播图效果

window.setInterval(code,millisec)按照指定的周期(间隔)来执行函数或代码段。参数1：code必须。执行的函数名或者执行的代码段参数2

港控/mmm°/ 2023年02月13日 05:54/ 0 赞/ 14 阅读

相关用jquery简单的实现京东轮播图效果

用jquery简单的实现京东轮播图效果\\ 标题 html部分 <!DOCTYPE html> <html lang="en"> <hea

小灰灰/ 2022年12月15日 14:06/ 0 赞/ 160 阅读

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。 ps：功能比较简单，整个框并不能根据图片的大小自动调节，

客官°小女子只卖身不卖艺/ 2022年10月10日 11:21/ 0 赞/ 233 阅读

相关 html轮播图京东效果,JavaScript仿京东轮播图效果

本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码，供大家参考，具体内容如下做了一个仿京东的轮播图，当然没有人家官网的精美啦。 ![3f7d657d

比眉伴天荒/ 2022年10月06日 04:56/ 0 赞/ 263 阅读

相关 Vue实现简单图轮播效果

1 问题描述在用vue做页面设计时，首页经常会用到图片轮播效果，在之前讲slider滑块，那么如何用swiper滑块实现图片轮播呢？ 2 算法描述滑块视图容器。其中只

淡淡的烟草味﹌/ 2022年09月16日 08:43/ 0 赞/ 214 阅读

相关 jquery实现简单图片轮播效果

[下载地址][Link 1]jquery实现简单图片轮播效果，按钮控制上下图片翻转效果。 ![1631561661.png][] dd: [Link 1]: https

柔情只为你懂/ 2022年09月11日 11:10/ 0 赞/ 293 阅读

相关用ajax实现轮播器,jQuery实现简单的轮播图

先看效果，如果是你想要的，可以看看 ![d3719bc5e552d342a6da8a41ace054f9.gif][] 总体思路： 1.自动轮播 2.指定轮播 3.左

客官°小女子只卖身不卖艺/ 2022年09月03日 11:16/ 0 赞/ 191 阅读

相关 jquery实现轮播图效果

总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果先看下最后的效果图 ![Center]

野性酷女/ 2022年08月07日 04:58/ 0 赞/ 273 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 276 阅读

相关 js实现简单的轮播图效果

现在大多数网站都会在页面做一个轮播效果，看着舒服，同样的内容能展示更多的内容，很方便，我在今天接触到了这个无缝轮播图，在一番调试下总算是简单实现了效果，不多说，上代码 ht

客官°小女子只卖身不卖艺/ 2022年01月27日 02:19/ 0 赞/ 303 阅读