轮播图

jquery淡入淡出轮播图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>京东商城</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .slider {
      height: 340px;
      width: 790px;
      margin: 100px auto;
      position: relative;
    }
     .slider li {
      position: absolute;
      display: none;
    }
    .slider li:first-child {
      display: block;
    }
            .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>
</head>
<body>
<div class="slider">
  <ul>
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
  </ul>
  <div class="arrow">
    <span class="arrow-left">&lt;</span>
    <span class="arrow-right">&gt;</span>
  </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
        var count = 0;
        $(".arrow-right").click(function () {
        count++;
      if(count == $(".slider li").length){
        count = 0;
      }
      console.log(count);
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    });
    $(".arrow-left").click(function () {
      count--;
      if(count == -1){
        count = $(".slider li").length - 1;
      }
      console.log(count);
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    })
  });
</script>
</body>
</html>

移动端web轮播图,包括触摸左右滑动切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Title</title>
</head>
<style>
    *
    {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    body{
        background-color:#f5f5f5 ;
    }
    .banner{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .banner ul:first-child{
        width: 1000%;
        transform: translateX(-10%);
        -webkit-transform: translateX(-10%);
    }
    .banner ul li{
        float: left;
        width: 10%;
    }
    .banner ul li a{
        display: block;
        width: 100%;
    }
    .banner ul li img{
        display: block;
        width: 100%;
    }
    .banner ul:last-child{
        position: absolute;
        width: 118px;
        height: 6px;
        left: 50%;
        margin-left:-59px;
        bottom: 6px;
    }
    .banner ul:last-child li{
        width: 6px;
        height: 6px;
        border-radius: 3px;
        border: 1px solid #fff;
        margin-left:10px;
        float: left;
    }
    .banner ul:last-child li:first-child{
        margin-left: 0;
    }
    .banner ul:last-child .now{
        background: #fff;
    }
</style>
<body>

    <!--轮播图-->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
<script>
    window.onload = function () {

        banner();
    };
    var banner = function () {
        /*1. 自动轮播图且无缝   定时器,过渡*/
        /*2. 点要随着图片的轮播改变  根据索引切换*/
        /*3. 滑动效果  利用touch事件完成*/
        /*4. 滑动结束的时候    如果滑动的距离不超过屏幕的1/3  吸附回去   过渡*/
        /*5. 滑动结束的时候    如果滑动的距离超过屏幕的1/3  切换(上一张,下一张)根据滑动的方向,过渡*/

        /*轮播图*/
        var banner = document.querySelector('.banner');
        /*屏幕宽度*/
        var width = banner.offsetWidth;
        /*图片容器*/
        var imageBox = banner.querySelector('ul:first-child');
        /*点容器*/
        var pointBox = banner.querySelector('ul:last-child');
        /*所有的点*/
        var points = pointBox.querySelectorAll('li');

        var addTransition = function () {
            imageBox.style.transition = 'all 0.2s';
            imageBox.style.webkitTransition = 'all 0.2s';
        }
        var removeTransition = function () {
            imageBox.style.transition = 'none';
            imageBox.style.webkitTransition = 'none';
        }
        var setTranslateX = function (translateX) {
            imageBox.style.transform = 'translateX(' + translateX + 'px)';
            imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
        }


        /*程序的核心 index */
        var index = 1;
        var timer = setInterval(function () {
            index++;
            /*加过渡*/
            addTransition();
            /*做位移*/
            setTranslateX(-index * width);
        }, 1000);
        /*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
        imageBox.addEventListener('transitionend', function () {
            /*自动滚动的无缝*/
            if (index >= 9) {
                index = 1;
                /*瞬间定位*/
                /*清过渡*/
                removeTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }
            /*滑动的时候也需要无缝*/
            else if (index <= 0) {
                index = 8;
                /*瞬间定位*/
                /*清过渡*/
                removeTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }
            /*根据索引设置点*/
            /*此时此刻  index  的取值范围  1-8(0,8--1,9)*/
            /*点索引  index - 1 */
            setPoint();
        });

        /*设置点的方法*/
        var setPoint = function () {
            /*index 1-8*/
            /*清除样式*/
            for (var i = 0; i < points.length; i++) {
                var obj = points[i];
                obj.classList.remove('now');
            }
            /*给对应的加上样式*/
            points[index - 1].classList.add('now');
        }

        /*绑定事件*/
        var startX = 0;
        var distanceX = 0;
        var isMove = false;
        banner.addEventListener('touchstart', function (e) {
            /*清除定时器*/
            clearInterval(timer);
            /*记录起始位置的X坐标*/
            startX = e.touches[0].clientX;

        });
        banner.addEventListener('touchmove', function (e) {
            /*记录滑动过程当中的X坐标*/
            var moveX = e.touches[0].clientX;
            /*计算位移  有正负方向*/
            distanceX = moveX - startX;
            /*计算目标元素的位移  不用管正负*/
            /*元素将要的定位=当前定位+手指移动的距离*/
            var translateX = -index * width + distanceX;
            /*滑动--->元素随着手指的滑动做位置的改变*/
            removeTransition();
            setTranslateX(translateX);
            isMove = true;
        });
        banner.addEventListener('touchend', function (e) {
            /*4.  5.  实现*/
            /*要使用移动的距离*/

            if (isMove) {
                if (Math.abs(distanceX) < width / 3) {
                    /*吸附*/
                    addTransition();
                    setTranslateX(-index * width);
                } else {
                    /*切换*/
                    /*右滑动 上一张*/
                    if (distanceX > 0) {
                        index--;
                    }
                    /*左滑动 下一张*/
                    else {
                        index++;
                    }
                    /*根据index去动画的移动*/
                    addTransition();
                    setTranslateX(-index * width);
                }
            }
            /*最好做一次参数的重置*/
            startX = 0;
            distanceX = 0;
            isMove = false;
            /*加上定时器*/
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                /*加过渡*/
                addTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }, 1000);
        });
    }
</script>

</html>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值