仿京东移动端手指拨动切换轮播图效果

如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果。
这个效果的主要技术点依托于触屏设备特有的touch事件;好了,接下来就进入主题吧。

首先是html布局:

1. 这里强调的是记得给html加上viewport这个适口属性。
2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张图片。
3. f_l代表的是左浮动

**html代码如下:**
                <ul class='banner_imgs clearfix'>
                    <li class='f_l'>
                        <a href="#"><img src="image/l8.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l1.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l2.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l3.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l4.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l5.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l6.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l7.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l8.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l1.jpg" alt="" /></a>
                    </li>
                </ul>
                <!-- 轮播图的 索引 -->
                <ul class="banner_index clearfix">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

接下来是css样式:

  1. 注意,此处并没有加上常规的reset样式代码
.jd_banner .banner_imgs {
  /* 10倍屏幕宽度 */
  width: 1000%;
}
.jd_banner .banner_imgs li {
  /* 一倍的屏幕宽度 */
  width: 10%;
}
.jd_banner .banner_imgs li a {
  display: block;
  width: 100%;
}
.jd_banner .banner_imgs li a img {
  display: block;
  width: 100%;
}
.jd_banner .banner_index {
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -64px;
}
.jd_banner .banner_index li {
  float: left;
  width: 6px;
  height: 6px;
  border: 1px solid white;
  border-radius: 50%;
  margin: 0 5px;
}
.jd_banner .banner_index li.current {
  background-color: #fff;
}

最后是最最重要的js代码啦

1. transitionend 过渡结束后触发的效果,在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间,切换回到真正的第一张图片处;
2. touch事件的三要素: touchstart--手指按上时,touchmove--手指移动时,touchend--手指松开屏幕时;
3. event.touches[0].clientX获取按下一个手指时的位置,可以打印出event查看其包含有哪些属性方法;
window.onload = function() {
    slide();
}

function slide() {
    var bannerImgs = document.querySelector(".banner_imgs");
    var Indexs = document.querySelectorAll(".banner_index li");
    var imgLis = document.querySelectorAll(".banner_imgs li");

    //屏幕宽度
    var screenWidth = document.body.offsetWidth;
    var index = 1;

    //默认显示的应该是第二张图片
    bannerImgs.style.transform = "translateX(" + screenWidth * index * -1 + "px)";

    //添加过渡效果
    function setTransition() {
        bannerImgs.style.webkitTransition = "all .2s";
        bannerImgs.style.transition = "all .2s";
    }

    //清除过渡效果
    function clearTransition() {
        bannerImgs.style.webkitTransition = "none";
        bannerImgs.style.transition = "none";
    }

    //设置移动距离
    function setTranslateX(distance) {
        bannerImgs.style.webkitTransform = "translateX(" + distance + "px)";
        bannerImgs.style.transform = "translateX(" + distance + "px)";
    }

    //控制小圆点
    function setPoint() {
        for (var i = 0; i < Indexs.length; i++) {
            Indexs[i].className = "";
        }
        Indexs[index - 1].className = "current";
    }

    //设置定时器
    var timer = setInterval(function() {
        index++;
        setTransition();
        setTranslateX(screenWidth * index * -1);
    }, 1000);

    //添加过渡动画结束事件
    bannerImgs.addEventListener("transitionend", function() {
        if (index > 8) {
            index = 1;
        } else if (index < 1) {
            index = 8;
        }
        clearTransition();
        setTranslateX(screenWidth * index * -1);
        setPoint();
    })


    //添加touch事件
    var startX = 0;
    var moveX = 0;
    var isMove = false;

    bannerImgs.addEventListener("touchstart", function(event) {
        isMove = false;
        clearInterval(timer);
        startX = event.touches[0].clientX;
    })

    bannerImgs.addEventListener("touchmove", function(event) {
        isMove = true;
        moveX = event.touches[0].clientX - startX;
        setTranslateX(moveX + index * screenWidth * -1);
    })

    bannerImgs.addEventListener("touchend", function(event) {
        if(isMove && Math.abs(moveX) > screenWidth/3){
            if (moveX < 0) {
                index++;
            } else if (moveX > 0) {
                index--;
            }
        }
        setTransition();
        setTranslateX(index * screenWidth * -1);
        timer = setInterval(function() {
            index++;
            setTransition();
            setTranslateX(screenWidth * index * -1);
        }, 1000);
    })
}
  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值