美文网首页
手机端网页banner实现

手机端网页banner实现

作者: 怀若先生 | 来源:发表于2020-04-22 20:39 被阅读0次

效果是这样的:注意的是:要记得导入 jquery!  jquery! jquery! 才能运行哦。。。 

废话不多说直接上代码:


html:banner.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="viewport"  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<!--轮播图-->

<div class="news-banner" id="news-banner">

    <ul id="bannerul">

        <li><a href=""></a></li>

    </ul>

    <ul id="banner_ul_dot">

        <li class="now"></li>

        <li ></li>

    </ul>

</div>

<!--轮播图End-->


js:

demodata.js

getBanner();//调用这个函数

function getBanner() {

var backData = [{"picture":"./images/1.jpg"},{"picture":"./images/2.jpg"},{"picture":"./images/3.jpg"}];

var str = "";

var dotstr= "";

$("#bannerul").empty();

$("#banner_ul_dot").empty();

for(var i = 0 ; i < backData.length ; i++){

if(i == 0){

str +='<li><a href><img src="'+backData[backData.length-1].picture+'" /></ a></li>';

}

str +='<li><a href><img src="'+backData[i].picture+'" /></ a></li>';

if(i == 0){

dotstr +='<li class="now"></li>';

}else{

dotstr +='<li></li>';

}

if(i == (backData.length-1) ){

str +='<li><a ><img src="'+backData[0].picture+'" /></ a></li>';

}

}

$("#bannerul").append(str);

$("#banner_ul_dot").append(dotstr);

/*轮播图Start*/

banner();

}

banner.js

//banner实例函数

function banner() {

    /*1. 自动轮播图且无缝  定时器,过渡*/

    /*2. 点要随着图片的轮播改变  根据索引切换*/

    /*3. 滑动效果  利用touch事件完成*/

    /*4. 滑动结束的时候    如果滑动的距离不超过屏幕的1/3  吸附回去  过渡*/

    /*5. 滑动结束的时候    如果滑动的距离超过屏幕的1/3  切换(上一张,下一张)根据滑动的方向,过渡*/

    /*轮播图*/

    var banner = document.querySelector('.news-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 images = document.querySelector('#bannerul').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 imgnum = images.length-2;

    var index = 1;

    var timer = setInterval(function () {

        index++;

        /*加过渡*/

        addTransition();

        /*做位移*/

        setTranslateX(-index * width);

    }, 2000);

    /*需要等最后一张动画结束去判断 是否瞬间定位第一张*/

    imageBox.addEventListener('transitionend', function () {

        /*自动滚动的无缝*/

        // console.log("index:"+index);

        // console.log("imgnum:"+imgnum);

        if (index > imgnum) {

            index = 1;

            /*瞬间定位*/

            /*清过渡*/

            removeTransition();

            /*做位移*/

            setTranslateX(-index * width);

        }

        /*滑动的时候也需要无缝*/

        else if (index < imgnum) {

            if(index <= 0){

                index = imgnum;

                /*瞬间定位*/

                /*清过渡*/

                removeTransition();

                /*做位移*/

                setTranslateX(-index * width);

            }else{

                //index++;

                /*瞬间定位*/

                /*清过渡*/

                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;

    imageBox.addEventListener('touchstart', function (e) {

        /*清除定时器*/

        clearInterval(timer);

        /*记录起始位置的X坐标*/

        startX = e.touches[0].clientX;

    });

    imageBox.addEventListener('touchmove', function (e) {

        /*屏蔽父元素事件响应*/

        e.stopPropagation();

        /*记录滑动过程当中的X坐标*/

        var moveX = e.touches[0].clientX;

        /*计算位移  有正负方向*/

        distanceX = moveX - startX;

        /*计算目标元素的位移  不用管正负*/

        /*元素将要的定位=当前定位+手指移动的距离*/

        var translateX = -index * width + distanceX;

        /*滑动--->元素随着手指的滑动做位置的改变*/

        removeTransition();

        setTranslateX(translateX);

        isMove = true;

    });

    imageBox.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);

        }, 3000);

    });

}


css:

base.css

*::before,

*::after{

    /*所有的标签,和伪元素都选中*/

    margin: 0;

    padding: 0;

    /*移动端常用布局是非固定像素*/

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    /*点击高亮效果的清除*/

    tap-highlight-color: transparent;

    -webkit-tap-highlight-color: transparent;

}

ul,ol{

    list-style: none;

}

a{

    text-decoration: none;

    color: #333;

}

banner.css

/*轮播图*/

.news-banner{

    width: 93%;

    overflow: hidden;

    position: relative;

    margin: 10px auto;

    height: 115px;

    border-radius: 5px;

}

.mui-table-view-cell{

    padding: 0;

}

.news-banner ul:first-child{

    width: 1000%;

    transform: translate(-10%);

    -webkit-transform: translate(-10%);

}

.news-banner ul:first-child li{

    width: 10%;

    float: left;

}

.news-banner ul:first-child li a{

    display: block;

    width: 100%;

    /*border: 1px solid red;*/

    height: 115px;

}

.news-banner ul:first-child li a img{

    display: block;

    width: 100%;

    height: 115px;

    /*border: 1px solid red;*/

}

.news-banner ul:last-child{

    position: absolute;

    /* width: 118px; */

    height: 6px;

    left: 50%;

    /* margin-left: -49px; */

    bottom: 6px;

    transform: translate(-50%,0);

}

.news-banner ul:last-child li{

    width: 6px;

    height: 6px;

    border-radius: 50%;

    border: 1px solid #fff;

    margin-left: 10px;

    float: left;

}

.news-banner ul:last-child li:first-child{

    margin-left: 0;

}

.news-banner ul:last-child .now{

    background-color: #fff;

}

/*轮播图End*/


图片路径:

images/**.jpg

最后把文件保存到一个文件夹里面就像我这样子:

如果这个对你有用帮忙点赞哦!感谢各位亲们

相关文章

  • 手机端网页banner实现

    效果是这样的:注意的是:要记得导入 jquery! jquery! jquery! 才能运行哦。。。 废话不多说直...

  • Banner视觉表现形式!

    文/袁希晨 Banner由于其表现方式直接、简单被广泛应用于移动手机端和网页端界面设计中,Banner作为信息传播...

  • 响应式图片与<picture>标签的使用

    在设计网站的时候,网页banner放到移动端里展示很难看怎么办?用 标签呐 响应式 一、响应式设计的由来 在手机、...

  • js的sm-crypto和 java的bcprov-jdk16-

    前言 1. 需求: Vue 网页端实现数据数据安全,关键数据加密,防篡改等 Apk 手机端实现数据安全,关键数据加...

  • GOKU 交付文档

    overview 文档介绍 实现的功能1.1 手机端1.2 网页端 上线前准备 使用流程3.1 管理员3.2 用户...

  • pc端、手机端网页切换

    // pc端、手机端网页切换 //URL跳转

  • 网页 banner

  • PC端嵌入手机网页

    因为业务需要,我们需要将手机端的网页在PC端进行嵌套,使PC端页面不太简单。通过直接将手机端网页嵌入到PC端会减少...

  • JS实现水印效果

    实现代码如下 实现效果如下 欢迎打赏!感谢 本团队长期承接企业官网开发、电脑端和手机端的网页制作,团队有多年开发经...

  • CSS 最佳实践 + 套路(四) -- 移动端适配

    脚本实现自动创建移动端适配的相关文件 概述 手机上显示网页是将整个网页缩小,模拟页面宽度 980px ,可以使用 ...

网友评论

      本文标题:手机端网页banner实现

      本文链接:https://www.haomeiwen.com/subject/tdjiihtx.html