zoukankan      html  css  js  c++  java
  • 手机幻灯

    html

    =====================================

    <div class="box">
    <ul id="slider" class='slider'>
    <li class='a'>1</li>
    <li class='b'>2</li>
    <li class='c'>3</li>
    <li class='d'>4</li>
    <li class='e'>5</li>
    </ul>
    <div class='dot' id='dot'>
    <ul>
    <li class='current'>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>
    </div>

    css

    =====================================

    body { margin: 0; }
    .box { 100%; overflow: hidden;position: relative; }
    ul,li { margin: 0; padding: 0; list-style: none; }
    .box .slider { 500%; overflow: hidden; transition: .5s; }
    .box .slider li { 20%; float: left; }
    .box .slider li { font-size: 40px; color: #fff; text-align: center; line-height: 150px; }
    .box .dot{position: absolute;left: 40%;bottom: 10%; 300px;}
    .box .dot li{float: left; 10px;height: 10px;border-radius:50%;border:1px solid #333;text-indent: -999px;margin: 0 2px;background: #fff;}
    .box .dot .current{border:1px solid red;}

    js

    ====================================

    window.onload = function() {
    var oUl = document.getElementById('slider');
    var aLi = oUl.getElementsByTagName('li');
    var dot=document.getElementById('dot');
    var dotLi = dot.getElementsByTagName('li');

    var sX = 0; // 手指初始x坐标
    var sLeft = 0; // 初始位移
    var index = 0;
    var curLeft = 0; // 当前位移
    var disX = 0; // 滑动差值

    var timer=null;

    timer=setInterval(autoPlay,6000); //自动轮播


    oUl.addEventListener('touchstart', touchstart, false);

    function touchstart(e) {
    clearInterval(timer);
    e.preventDefault();
    sX = e.changedTouches[0].pageX;

    // 计算初始位移
    sLeft = oUl.style.transform ? -parseInt(/d+/.exec(oUl.style.transform)[0]) : 0;
    oUl.style.transition = 'none';

    document.addEventListener('touchmove', touchmove, false);
    document.addEventListener('touchend', touchend, false);
    }

    function touchmove(e) {
    disX = e.changedTouches[0].pageX - sX;
    curLeft = sLeft + disX;
    oUl.style.transform = 'translateX(' + curLeft + 'px)';
    }

    function touchend(e,b) {
    if (disX > 100) {
    if (index != 0) {
    index -= 1;
    }
    }
    if (disX < -100) {
    if (index != aLi.length - 1) {
    index += 1;
    };
    };
    oUl.style.transition = '.5s';
    oUl.style.transform = 'translateX(' + -index*aLi[0].offsetWidth + 'px)';
    showBtn(index);
    timer=setInterval(autoPlay,6000);
    }

    function autoPlay(){
    index=index<aLi.length-1?++index:0;
    oUl.style.transform = 'translateX(' + -index*aLi[0].offsetWidth + 'px)';
    showBtn(index);
    }
    function showBtn(index){
    console.log(index);
    for(var i=0;i<dotLi.length;i++){
    dotLi[i].classList.remove('current');
    }
    dotLi[index].classList.add('current');
    }

    }

  • 相关阅读:
    Request Payload 和 Form Data 的区别
    es6 字符串模板拼接和传统字符串拼接
    TypeScript
    Jquery的$(document).click() 在iphone手机上失效的问题
    Vuex 是什么?
    什么是JSONP?
    git 放弃本地修改操作
    CSS3+HTML5+JS 实现一个块的收缩&展开动画
    Promise学习笔记(一)
    React@16.13.1配合antd UI使用,自定义主题
  • 原文地址:https://www.cnblogs.com/wz0107/p/5046372.html
Copyright © 2011-2022 走看看