一个移动端首页 滑动轮播图 数据测试 自适应

最新推荐文章于 2022-10-12 21:24:54 发布
最新推荐文章于 2022-10-12 21:24:54 发布
阅读量170 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe19991123/article/details/105273292
版权 

```bash
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div class="container">
    <header>
      <h1>首页</h1>
    </header>
    <section>
      <div class="slide">
        <ul class="list" id="list">
          <li class="item"><img src="./img/4.jpg" alt=""></li>
          <li class="item"><img src="./img/2.jpg" alt=""></li>
          <li class="item"><img src="./img/3.jpg" alt=""></li>
          <li class="item"><img src="./img/1.jpg" alt=""></li>
        </ul>
        <ul class="point">
        </ul>
      </div>
      <h3>热门商品</h3>
      <div class="content">
        <ul>
          <li>
            <img src="./img/disney.jpg" alt="">
            <h4>迪士尼爱与梦想绘本(套装共15册)[3-6岁]</h4>
            <p>￥ <span>131.30</span></p>
            <del>￥<span>154.50</span></del>
          </li>
          <li>
            <img src="./img/disney.jpg" alt="">
          <h4>迪士尼爱与梦想绘本(套装共15册)[3-6岁]</h4>
          <p>￥ <span>131.30</span></p>
          <del>￥<span>154.50</span></del>
          </li>
          <li>
            <img src="./img/disney.jpg" alt="">
          <h4>迪士尼爱与梦想绘本(套装共15册)[3-6岁]</h4>
          <p>￥ <span>131.30</span></p>
          <del>￥<span>154.50</span></del>
          </li>
          <li>
            <img src="./img/disney.jpg" alt="">
          <h4>迪士尼爱与梦想绘本(套装共15册)[3-6岁]</h4>
          <p>￥ <span>131.30</span></p>
          <del>￥<span>154.50</span></del>
          </li>
          <li>
            <img src="./img/disney.jpg" alt="">
          <h4>迪士尼爱与梦想绘本(套装共15册)[3-6岁]</h4>
          <p>￥ <span>131.30</span></p>
          <del>￥<span>154.50</span></del>
          </li>
        </ul>         
      </div>
    </section>
    <footer>
      <ul>
        <li>
          <img src="./img/home.png" alt="">
          <p>首页</p>
        </li>
        <li>
          <img src="./img/list2.png" alt="">
          <p>分类</p>
        </li>
        <li>
          <img src="./img/shopcar2.png" alt="">
          <p>购物车</p>
        </li>
        <li>
          <img src="./img/me2.png" alt="">
          <p>我的</p>
        </li>
      </ul>
    </footer>
  </div>

  <script src="./js/script.js"></script>
</body>

</html>

``


```css
* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 500px){
    html,
    body {
        font-size: 20px;
    }
}
@media screen and (min-width: 600px){
    html,
    body {
        font-size: 25px;
    }
}
@media screen and (min-width: 700px){
    html,
    body {
        font-size: 28px;
    }
}


.container {
    background-color: rgb(246,246,246);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.container header {
    height: 60px;
}

.container header h1 {
    text-align: center;
    padding: 10px;
    color: #c39862;
    font-size: 25px;
    font-weight: 500;
}

/* color="#c39862" */
.container section {
    height: auto;
    flex: 1;
    overflow: auto;
}

.container section .slide {
    background-color: gray;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 8PX;
}

.container section .slide img {
    width: 100%;
    height: 200px;
    display: block;
}

.container section .slide .list {
    list-style: none;
    width: 400%;
}

.container section .slide .item {
    width: 25%;
    float: left;
}
.container section .slide .list::after{
    content: '';
    display: block;
    clear: both;
}
.container section .slide .point{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    list-style: none;
}
.point-item{
    height: 8px;
    width: 8px;
    background-color: white;
    opacity: .2;
    border-radius:100px ;
    margin: 0 5px;
    float: left;
}
.point-item.active{
    opacity: 1;
}
h3{
    margin: 24px;
    color: #c39862;
}
.content{
    width: 100%;
}
.content ul::after{
    content: '';
    display: block;
    width: 45%;
}
.content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
}
.content ul li{
    width: 46%;
    background-color: white;
    margin-bottom: 20px;
    border-radius: 10px;
}
.content ul li img{
    width: 100%;
    border-radius: 10px;
    height: 15rem;
}
.content ul li h4{
    color: rgb(60,60,60);
    font-size: 15px;
    margin-bottom: 5px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.content ul li p{
    display: inline-block;
}
.content ul li p{
    color: red;
}
.content ul li del{
    font-size: 5px;
    color: rgb(189,189,189);
}
.container footer {
    height: 60px;
}

.container footer {
    border: 1px solid rgb(237,237,237);
}

.container footer ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.container footer img{
    width: 30px;
    height: 30px;
}
.container footer ul li p{
    font-size: 5px;
}
.container footer ul li{
    margin: 5px;
    text-align: center;
}
.container footer ul li:first-child{
    color: #c39862;
}


```css

```javascript
var slide = document.getElementsByClassName('slide')[0];
var list = document.getElementsByClassName('list')[0];
var items = document.getElementsByClassName('item');
var imgs = document.querySelectorAll('.container section .slide img')
var pointWrap = document.getElementsByClassName('point')[0];

if(window.innerWidth < 800){
    slide.style.width = (window.innerWidth - 20) + 'px';
}else{
    slide.style.width = 780 + 'px';
}
var slide_Width = parseInt(slide.style.width);

//轮播图
function slide_img(){
    var points = [];
    //创建小点函数 初始化小点
    function createPoint(){
        var pointDom = document.createElement('li');
        pointDom.classList.add('point-item');
        if(i === 0){
            pointDom.classList.add('active')
        }
        points.push(pointDom)
        pointWrap.appendChild(pointDom)
       
    }
    //让小点跟随图片改变
    function setIndex(){
        var index = state.index;
        for(var i = 0 ; i < points.length ; i++){
              points[i].classList.remove('active')
        }
        points[index].classList.add('active')
    }
    
    for(var i = 0; i <items.length ; i ++){
          items[i].style.width = slide_Width + 'px';
          createPoint(i);
    }
    //方便调试的list长度
    list.style.width = items.length * slide_Width + 'px';
    //创建个对象来记录数值
    var state = {
        beginX : 0,
        nowX : 0,
        endX : 0,
        index : 0
    }
    //跟手函数
    function slide_hand(){
        var deltaX = state.nowX - state.beginX;
        list.style.marginLeft = -(slide_Width * state.index) + deltaX + 'px'
    }
    //复位函数
    function reSet(){
        list.style.transition = 'all .3s'
        list.style.marginLeft = (- state.index * slide_Width) + 'px';
    }
    //去到下一张函数如果索引小于最后一张索引 也就在最后一张之前时候执行向后滑动 否则复位
    function goNext(){
        if(state.index < items.length - 1 ){
            state.index++;
            list.style.transition = 'all .3s'
            list.style.marginLeft = - state.index * slide_Width + 'px';
            setIndex()
        }else{
            reSet();
        }
    }
    //去到上一张函数如果索引大于零 也就在第一张之后的时候执行向前滑动 否则复位
    function goPrev(){
        if(state.index > 0){
            state.index--;
            list.style.transition = 'all .3s'
            list.style.marginLeft = - state.index * slide_Width + 'px';
            setIndex()
        }else{
            reSet();
        }
    }
    //判断复位还是下一张函数 如果滑动距离大于轮播图宽度的五分之二就下一张或者上一张
    function _judgeMove(){
        var deltaX = state.endX - state.beginX;
        if(deltaX >= slide_Width * 2 / 5){
              goPrev();
        }else if(deltaX <= -slide_Width * 2 / 5){
              goNext();
        }else{
              reSet();
    
        }
    }
    //手指点击到屏幕触发
    slide.addEventListener('touchstart',function(e){
        
           list.style.transition = 'none';
           state.beginX = e.targetTouches[0].clientX;
           
    })
    //手指在屏幕上移动时触发 跟手事件
    slide.addEventListener('touchmove',function(e){
           
    
           var nowX = e.changedTouches[0].clientX;
           state.nowX = nowX;
           //跟手函数
           slide_hand()
        
    })
    //手指抬起时判断轮播图复位还是去下一张
    slide.addEventListener('touchend',function(e){
           state.endX = e.changedTouches[0].clientX;
           //判断函数
            _judgeMove();
    })
}
slide_img();

var container = document.getElementsByClassName('container')[0];

if(window.innerWidth > 800){
    container.style.width = 800 + 'px';
}
if(window.innerWidth > 500){
    for(var i = 0 ; i < imgs.length ; i++){
        imgs[i].style.height = '250px'
    }
}
if(window.innerWidth > 600){
    for(var i = 0 ; i < imgs.length ; i++){
        imgs[i].style.height = '300px'
    }
}

//fetch 获取数据
var url = 'http://localhost:3000/walkBookstore';


function changeBanner(list){
    list.forEach(element =>{
        document.querySelectorAll('#list img')[element.id-1].src = element.url;
    });
 }
 function insertGoods(list){
    var s_books = '';
    list.forEach(element =>{
        s_books += `<li>
        <img src = "${element.cover}">
        <h4>${element.bookName}</h4>
        <p>￥ <span>${element.price}</span></p>
        <del>￥<span>${element.recentPrice}</span></del>
        </li>`
    })
    document.querySelector('.content ul').innerHTML = s_books;
 }
fetch(url,{
    method:'GET',
    // headers:Headers,
    mode:'cors'

}).then(Response=> Response.json()).then(
    data => {
        console.log(data);
        banner_list = data.data.banner;
        a = data.book_list;
        insertGoods(a);
        changeBanner(banner_list);
    }
);
东泽o.0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页和移动端自适应的轮播图（运用bootstrap）
weixin_44239035的博客
05-27 2482
首先要引入bootstrap的文件，自行下载 <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <script src="../lib/jquery/jquery.min.js"></script> <script src="../lib/bootstrap/js/boots...
jquery移动端开发自适应轮播图
12-10
亲测可以使用的自适应轮播图 如果与jquery mobile css文件相冲突，可以添加data-role=“none”
简单移动端自适应轮播图
weixin_30779691的博客
03-27 569
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscre...
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
10-19
主要介绍了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),需要的朋友可以参考下
移动端网页轮播图
m0_52861684的博客
10-12 3168
移动端网页轮播图，不必考虑兼容性问题，CSS两个属性实现元素的动画效果及缓冲特效，通过 classList 属性移除、添加类名，轻松实现小圆点的跟随效果。
移动端可滑动轮播图
02-24
移动端可滑动轮播图是网页设计中常见的一种交互元素，尤其在移动设备上，用于展示多张图片或内容的滚动展示。这个压缩包提供的代码实现了多种类型的移动端可滑动轮播图，适用于HTML5页面，同时兼容微信环境，具备...
携程_携程移动端_移动端轮播图_源码
10-01
移动端轮播图通常由若干个图片或内容区域组成，每个区域称为一个幻灯片。用户可以通过左右滑动或点击导航点来切换不同的幻灯片。基本的HTML结构包括一个容器元素，以及若干个用于存放幻灯片的子元素。 2. 实现方式 ...
移动端无缝滑屏(轮播图)
08-04
移动端无缝滑屏（轮播图）是移动应用和网站设计中的常见组件，它允许用户通过左右滑动查看多个内容卡片，通常用于展示广告、产品图片或重要信息。这种设计不仅美观，还能有效利用有限的屏幕空间，提升用户体验。在...
原生js实现移动端Touch轮播图的方法步骤
10-17
本文将详细介绍如何使用原生JavaScript实现一个基于Touch的移动端轮播图。 首先，我们需要理解轮播图的基本结构。通常，HTML部分会包含一个`<ul>`元素来承载轮播图片，每个图片对应一个`<li>`元素。同时，为了指示...
移动端原生dom轮播图 手机测试可以
业余前端的职业经历
12-29 249
1.如果你在已经写好的项目中 要添加轮播图的话 建议还是使用原生dom进行书写轮播图 移动端和pc端的区别就是 移动端 是需要用手指进行滑动的 移动端的事件就不想再这里一一赘述了 当然 你要是重新开始写项目的话 推荐使用mui 这个手机app的ui插件 确实可以 https://dev.dcloud.net.cn/mui/ ...
手机网站轮播幻灯自适应屏幕大小
11-24
如有下载不起的。请联系我，我免费提供给你们
手机移动wap端一个页面三个自动轮播图共存--幻灯片右下角自动获取图片数量
03-09
1.一个手机移动网页同时放置三个自动轮播图特效，支持手势滑动，自适应手机移动端。 2.自动轮播幻灯片右下角会自动获取图片总数量，并且显示当前图片所在位置，比如1/5、2/5、3/5、4/5、5/5形式。 3.三个幻灯片特效独立共存，互不影响。
rem+css轮播查询实现网页自适应
qq_48384411的博客
09-05 294
rem+css轮播查询实现网页自适应
移动端轮播图（原生JS写法）
weixin_47424113的博客
02-02 3114
移动端轮播图（原生JS写法） 文章目录移动端轮播图（原生JS写法）一、实现功能：二、实现步骤三、页面布局四、焦点图模块样式五、JS逻辑代码 一、实现功能： 可以自动播放图片 手指可以拖动播放轮播图 二、实现步骤 自动播放功能： ① 开启定时器 ② 移动端移动可以使用CSS3的translate移动。注意， 使用translate不需要添加就可以移动 ③ 想要图片优雅的移动，就需要添加过渡效果 自动播放功能-无缝滚动： ① 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 ② 此时需
移动端轮播图自适应
Just do IT！的博客
09-03 4035
大屏幕下怎么展示？ 将容器的高度固定（如410px），将轮播图改为背景显示，由于可能图片的高度不一定是410px，所以需要设置css3中的background-size。 为什么这么展示？ 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度，而且Bootstrap的样式中默认将图片的max-width设置为100%，造成界面图片缩放。 ###有...
关于如何将轮播图在移动端和pc端自适应的操作
weixin_44302838的博客
10-15 2751
我用的bootstrap框架做的,轮播图代码用的bootstrap上的。 如何做到pc端和移动端兼容,关键在于一张图片需要2份,一份大的图,一份小的图，通过屏幕宽度的改变,来确定展示大图片还是小图片。 html代码 这里我将2张图片放在了自定义属性data-image中,方便操作。 <section id="main_ad" class="carousel slide" data-ride="carousel" data-interval="2200"> <!-- Indi
1、js原生实现移动端手指滑动轮播图效果
热门推荐
iceking66的博客
10-19 2万+
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> title>Docume
K-means聚类.py ACM比赛常用算法k-means算法
最新发布
07-14
K-means聚类.py ACM比赛常用算法k-means算法
js 六张图片写一个左右滑动轮播图
05-22
可以使用以下步骤实现左右滑动轮播图： 1. 在 HTML 文件中创建一个容器 div 并添加六张图片。 ... ...2. 使用 CSS 将容器布局为水平方向，并且设置图片的宽度和高度。...这样就可以实现一个简单的左右滑动轮播图了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值