使用mock模拟数据，实现图片文字向上的轮播

向上轮播，效果图：

使用mock模拟的数据，使用jq的ajax获取数据，字符串拼接，但是某些方面又写成了原生的js，图片来自百度图片，侵权请留言删除，欢迎大神提出意见或批评。

CSS代码：

                 <style>*{padding: 0;margin: 0;}.div{height: 52px;width: 730px;overflow: hidden;margin: 0 auto;}li{list-style: none;float: left;width: 100px;}img{width: 30px;height: 30px;vertical-align: middle;margin-left: 10px;}.div{text-align: center;}.span{display: inline-block;margin-left: 10px;}.ul,.ul2{width: 680px;height: 50px;border: 1px solid #EEEEEE;}</style>

HTML代码：

                <div class="div"><ul class="ul"></ul><ul class="ul2"></ul><ul class="ul3"></ul></div>

js代码:

                <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(function(){var div =document.querySelector(".div");var ul = document.querySelector(".ul");var ul2 = document.querySelector(".ul2");div.scrollTop=0;function scrollUp(){if(div.scrollTop>=ul.offsetHeight){div.scrollTop=0;}else{div.scrollTop++;}}timer=null;clearInterval(timerr);var timerr=setInterval(scrollUp,50);div.οnmοuseοver=function(){clearInterval(timerr)}div.οnmοuseleave=function(){timerr=setInterval(scrollUp,50);}var str ="";var str2="";$.ajax({type:"GET",url:"https://easy-mock.com/mock/5b332dcb5d47652451763338/example/restful/:id/list_copy_1530240450637",async:true,dataType:'json',traditional: true,contentType: 'application/json',success:function(data){for(var i=0;i<data.data.items.length-6;i++){str+="<li><span><img src="+data.data.items[i].logo+">"+data.data.items[i].name+"</span><div>成绩:"+data.data.items[i].grades+"</div></li>"}$(".ul").append(str);for(var i=6;i<data.data.items.length;i++){str2+="<li><span><img src="+data.data.items[i].logo+">"+data.data.items[i].name+"</span><div>成绩:"+data.data.items[i].grades+"</div></li>"}$(".ul2").append(str2);},fail: function () {console.log('err')}});})</script>

使用mock模拟数据，实现图片文字向上的轮播相关推荐

VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
文章目录什么是mock vue项目引入mock mock模拟数据生成列表并模拟实现已发起表单页面表格分页功能 mock实现数据的新增 mock实现数据列表的删除列表数据批量处理(如审核通过) 总结 ...
html轮播文字上下轮播,js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本文字上下无缝轮播 * { margin: 0; ...
511遇见易语言教程窗口组件图片框属性实现轮播图
本节视频对易语言图片框的边框背景颜色.图片显示方式.做了示范,并且通过图片框实现了轮播图效果. 视频链接: 72 图片框属性教程源码: .版本 2 .支持库 eCompress.程序集窗口程序集_ ...
mock模拟数据，get、post请求
一.为什么使用mockjs 在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口 1.我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改查 2.使用json ...
vue使用mock模拟数据
文件目录 mock文件夹下的index.js import Mock from 'mockjs';//webpack默认对外暴露图片.JSON数据格式 import banner from './ba ...
Mock模拟数据生成接口
Easy Mock是一个可视化,并且能快速生成模拟数据的服务. Mock解决的问题开发时,后端还没完成数据输出,前端只好写静态模拟数据. 数据太长了,将数据写在js文件里,完成后挨个改url. 某些 ...
前端开发中使用mock模拟数据
使用mock进行模拟数据开发第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用第二步:在 main.js 文件中引入mock:import '@/mock' 第三步: ...
Spring Boot（九）Swagger2自动生成接口文档和Mock模拟数据
一.简介在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...

使用mock模拟数据，实现图片文字向上的轮播

使用mock模拟数据，实现图片文字向上的轮播相关推荐

最新文章

热门文章