跟轮播杠上了，这次很轻便

最新推荐文章于 2020-10-17 10:57:36 发布
最新推荐文章于 2020-10-17 10:57:36 发布
阅读量174 收藏
点赞数
分类专栏： JS 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36060786/article/details/79761814
版权

之前写过两个懒人轮播，为啥叫懒人轮播呢？因为从轮播图的创建到开始轮播然后切换都是自动完成的，需要做的只是给它指定个位置，向对象init函数中传入些参数（图片长度，宽度，图片数量）即可。有点全自动洗衣机的即视感敲打，不过这样做有一个  缺点，就是dom操作太多，影响了性能。这次不一样了，用animation动画简单实现了个自动轮播，超级轻便呢（前提条件是已知图片张数，但 图片路径未知，就是说可以通过更改图片  路径从而更新页面图片），只是缺点更多了：

①不能切换，因为动画一直在运行，若设置动画暂停就一切都停止了。

②轮播一张图片之间的间隔无法控制。

③修改图片宽高需要修改动画帧移动参数@keyframes。

不过用animation实现一些小型的轮播还是非常棒的，性能极佳。顺便贴下代码和思路：


js代码：

var demo = ( function( document, window) {
// 获取所需元素
var ele = {
// 轮播所在容器
oWrapper: document. querySelector( ".wrapper"),
// 轮播ul
oUl: document. querySelector( ".wrapper-ul"),
// 轮播li
aLi: document. querySelectorAll( ".wrapper-ul li"),
// 所有图片img标签
aImg: document. querySelectorAll( ".wrapper-ul li img"),
}
// 设置轮播wrapper,ul宽高并把图片资源放入li中
function setPlaying( wid, hei, num, imgs) {
ele. oWrapper. style. width = wid + "px";
ele. oWrapper. style. height = hei + "px";
ele. oUl. style. width = wid* num + "px";
ele. oUl. style. height = hei + "px";
ele. aLi. forEach( function( value, index, arr) {
value. style. width = wid + "px";
value. style. height = hei + "px";
})
// 设置图片属性
ele. aImg. forEach( function( value, index, arr) {
value. src = imgs[ index]. url;
value. alt = imgs[ index]. alt;
value. style. width = wid + "px";
value. style. height = hei + "px";
})
}
var run = {
// 默认图片宽度
imgW: 500,
// 默认图片高度
imgH: 500,
// 保存图片资源
imgs: [],
num: ele. aLi. length,
init : function( config) {
this. imgW = config. imgW|| this. imgW;
this. imgH = config. imgH|| this. imgH;
this. imgs = config. imgs;
//设置wrapper,ul,li宽高
setPlaying( this. imgW, this. imgH, this. num, this. imgs);
}
}
return run;
})( document, window);

html代码：

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< link rel= "stylesheet" href= "lunbo.css" >
< title >css3实现轮播 </ title >
</ head >
< body >
< div id= "container" >
< ul class= "wrapper-ul" >
< li >< img src= "" alt= "" width= "" height= "" ></ li >
< li >< img src= "" alt= "" width= "" height= "" ></ li >
< li >< img src= "" alt= "" width= "" height= "" ></ li >
< li >< img src= "" alt= "" width= "" height= "" ></ li >
< li >< img src= "" alt= "" width= "" height= "" ></ li >
</ ul >
</ div >
</ div >
< script src= "lunbo.js" > < / script >
< script >
demo. init({
imgW: 400,
imgH: 200,
imgs:[
{
url: "imgs/one.jpg",
alt: "one",
width: "300px",
height: "180px"
},
{
url: "imgs/two.jpg",
alt: "two",
width: "300px",
height: "180px"
},
{
url: "imgs/three.jpg",
alt: "three",
width: "300px",
height: "180px"
},
{
url: "imgs/four.jpg",
alt: "four",
width: "300px",
height: "180px"
},
{
url: "imgs/five.jpg",
alt: "five",
width: "300px",
height: "180px"
}
]
})
< / script >
</ body >
</ html
css代码：
@charset "utf-8";
/* 样式初始化 */
html,body {
width: 100%;
height: 100%;
}
body ,ul {
margin: 0;
}
ul {
padding: 0;
}
ul {
list-style: none;
}
/* container-start */
body {
background-color: rgb( 1, 1, 21);
}
#container {
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
overflow: hidden;
margin: 100px auto;
cursor: pointer;
}
.wrapper-ul {
position: absolute;
left: 0;
top: 0;
font-size: 0;
animation: play 12s infinite;
}
.wrapper-ul li {
display: inline-block;
}
/*轮播动画 */
@keyframes play {
0% {
transform: translate( 0px);
}
20% {
transform: translate( -400px);
}
40% {
transform: translate( -800px);
}
60% {
transform: translate( -1200px);
}
80% {
transform: translate( -1600px);
}
100% {
transform: translate( 0px);
}
}



QPQ_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt实现的酷炫轮播图
草上爬的博客
07-12 4995
无倒影 有倒影Qt中每一个窗口都有一个坐标系，默认的，窗口左上角为坐标原点，然后水平向右依次增大，水平向左依次减小，垂直向下依次增大，垂直向上依次减小。原点即为（0，0）点，然后以像素为单位增减。 例如： 我们先在原点（0，0）绘制了一个长宽都是100像素的红色矩形，又在（-50，-50）点绘制了一个同样大小的黄色矩形。可以看到，我们只能看到黄色矩形的一部分。效果如下： 如果自己绘制无法满足要求，可以使用QPainter的坐标换行，涉及的函数包括：translate()函数，进行平移变换；scale(
css实现文字上下滚动轮播效果
热门推荐
lzc的博客
09-02 1万+
效果图： 人狠话不多，代码如下： import React from 'react'; import styles from './notice.less'; class Index extends React.Component { render() { return ( <div className={styles.noticeContainer}&g...
Android Studio TextView上下滚动轮播
u014051380的专栏
08-25 6122
build.gradle(projcet:...) allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } build.gradle(Module:app) compile 'com.github.paradoxie:AutoVerticalTe
jQuery轮播图之上下轮播
十一的博客
06-30 7070
如图实现功能：1.鼠标放上图片图片停止滚动并显示对应数字2.鼠标离开图片继续滚动并显示对应数字3.鼠标放到对应的数字，显示到相对应图片并停止滚动轮播图原理：定义div里面存放ul，但每次只显示一个li,利用定时器setinteval定时和animate动画来移动li的位置。animate返回值:jQueryanimate(params,[speed],[easing],[fn])概述：用于创建自定...
jQuery轮播图之上下无缝滚动
十一的博客
06-30 5655
如图效果：实现功能：1.上下无缝滚动，2.鼠标放上去停止滚动并出现提示信息无缝滚动原理：每一次将第一个li移动到最后一个（append）html代码 &lt;div class="global_module prolist"&gt; &lt;h3&gt;新款上市&lt;/h3&gt; &lt;div class="prolist_co...
vue上下轮播组件简单实现
我不是水哥
05-29 1万+
在vue社区里面没有找到特别好的上下轮播插件，基本都是图片的左右播放插件，质量也是参差不齐 在实现这个组件之前，先抛出一个问题，如何在vue中实现dom的环形结构?              首先来看轮播组件的思路     红色部分：相当于放映机，也就是容器，overflow：hidden     绿色内容：相当于胶片，也就是dom     当放映机从上往下移动的时候，从视觉上看，就像...
js实现图片上下轮播效果（二）
一只胡萝卜
06-19 3530
js实现图片上下轮播效果
jQuery网站新闻公告上下滚动自动轮播代码
123po
04-21 5341
jQuery网站新闻公告上下滚动自动轮播代码
TextSwitcher文字切换器实现文字上下自动轮播效果
xiaoqiang_0719的博客
06-16 3506
使用TextSwitcher实现文字自动切换功能       TextSwitcher可以在切换View组件时使用动画效果。 TextSwitcher需要一个ViewFactory。 ViewFactory的makeView()方法必须返回一个TextView组件。  代码如下： // 定义文字切换器   ts = (TextSwitcher) findViewById(
android viewpager无限轮播
许佳佳的博客
10-17 1万+
概述 github地址：https://github.com/Double2hao/ViewPagerCycleTest 一直很好奇ViewPager无限轮播的实现方式，于是稍微研究了下，作此文记录之，效果如下： 原理 一般情况下ViewPager的size等于显示的fragment的个数。 无限轮播只需要，将ViewPager的size设置成无限大，通过取余后的值来显示Fragment即可。 此demo中还加入了timer来自动轮播。并且如果用户手动滑动的话，自动轮播会停止。 关键代码 无限轮播
精美html+css上下滚动,轮播(兼容ie8)
01-06
【精美html+css上下滚动,轮播(兼容ie8)】是一个基于jQuery技术实现的网页动态效果，旨在提供一种在浏览器上实现上下或左右切换的图片或文本轮播功能。这个解决方案特别强调了对IE7及更高版本的兼容性，确保在老旧...
ios自动轮播实现,分为左右轮播和上下轮播
06-14
本压缩包提供的资源包括了两种类型的轮播实现：左右轮播和上下轮播，这对于开发者来说是很好的学习和实践素材。下面将详细介绍这两种轮播的实现原理及关键知识点。 一、左右轮播 左右轮播是最常见的轮播形式，用户...
基于swiper上下图轮播共转插件
05-23
Swiper是一款广泛应用于Web开发中的触摸滑动框架，尤其适合创建高效的移动设备上的滑动内容，如轮播图、幻灯片等。基于Swiper的上下图轮播共转插件，是Swiper功能的一个独特扩展，它为用户提供了一种创新的交互方式...
jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字
02-27
代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一...
js实现轮播图上下
11-21
本项目是使用JavaScript实现一个具有上下导航功能的图片轮播组件，用户可以手动选择图片，也可以通过点击上一个或下一个按钮来切换图片。下面我们将详细探讨这个轮播图实现的关键知识点。 1. **DOM操作**： - ...
js中事件绑定的几种方式
qq_36060786的博客
03-03 5548
事件处理程序即给元素绑定事件的方式有下列几种：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。其实这些方式就是一个逐步优化和实现跨浏览器的过程。1、HTML事件处理程序：直接在html的标签中添加事件属性，例如：&lt;div onclick="fun()"&gt;&lt;/div&gt;这样做很是不好，有下列两大缺点，这也是如今在开发...
简单理解闭包的原理
qq_36060786的博客
03-01 4891
首先闭包表示有权访问另一个函数作用域中的变量的函数，常见的创建闭包的方式是在一个函数中创建另一个函数。要了解闭包的原理首先要了解函数作用域，接下来从函数作用域推广到闭包的原理。1、当某个函数被调用时，会创建一个执行环境及相应的作用域链。然后使用arguments和其他参数的值来初始化函数的活动对象。但在作用域链中，外部函数的活动对象始终处于第二位， 外部函数的外部函数的活动对象处于第三位，……以此...
socket聊天室实现啦
qq_36060786的博客
07-15 2747
最近新get了一招，先上图： 看到这是不是很熟悉呢，有没有一种想拿鼠标拖一拖的错觉呢。没错它就是模仿了qq群聊的样式，不过功能暂时不多只能发文字。这个在线聊天室使用了web-socket协议的功能并以node.js为后台进行编写，具体实现的机制是：     每个用户向进入界面后将与服务器连接，连接成功后用户向服务器发送的消息将被广播到所有正在连接该服务器的用户（即把该消息发送到连接到服务器...
js使用外部文件包含js的好处
qq_36060786的博客
02-22 2729
在html文档中嵌入js脚本的方式有两种，一种是内部嵌套，另外一种是使用外部脚本链接，此处讲解使用后者的好处。（1）可维护性：遍及不同HTML页面的javascript会造成维护问题，但把所有js文件都放在一个文件夹中维护起来就轻松多了。而且开发人员因为也能够在不触及HTML标记的情况下集中精力编写js代码（2）可缓存：浏览器能够根据具体的设置缓存链接的所有外部js文件，也就是说，如果有2个页面都...
jquery轮播图之上下轮播
最新发布
05-20
实现上下轮播的jQuery轮播图可以使用以下步骤： 1.创建HTML结构 首先，我们需要为轮播图创建HTML结构。可以使用ul和li元素来创建轮播图。每个li元素将包含轮播图的一个图像。 ``` <div class="slideshow"> <ul> <li><img src="image-1.jpg" alt=""></li> <li><img src="image-2.jpg" alt=""></li> <li><img src="image-3.jpg" alt=""></li> </ul> </div> ``` 2.设置CSS样式 接下来，我们需要设置轮播图的CSS样式。为了使轮播图具有上下滚动的效果，我们需要设置ul元素的高度为轮播图的高度，并将li元素的高度设置为轮播图高度的百分比。 ``` .slideshow { height: 500px; overflow: hidden; } .slideshow ul { list-style: none; margin: 0; padding: 0; height: 100%; } .slideshow li { height: 100%; } ``` 3.编写JavaScript代码 最后，我们需要编写JavaScript代码来实现轮播图的滚动效果。我们将使用jQuery库来实现这一点。 我们将使用setInterval函数来定期滚动轮播图。我们需要计算每个li元素的高度，并将其添加到ul元素的顶部。我们还将使用animate函数来添加动画效果。 ``` $(document).ready(function() { var interval = setInterval(function() { var height = $('.slideshow li:first').height(); $('.slideshow ul').animate({top: -height}, 1000, function() { $(this).append($('.slideshow li:first')).css({top: 0}); }); }, 2000); }); ``` 这将在2秒钟的间隔内滚动轮播图，并在每个li元素的顶部添加一个新的li元素。一旦轮播图滚动到最后一个li元素，它将重新开始从第一个li元素开始滚动。 完整的jQuery上下轮播图代码如下所示： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Slideshow</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> .slideshow { height: 500px; overflow: hidden; } .slideshow ul { list-style: none; margin: 0; padding: 0; height: 100%; } .slideshow li { height: 100%; } </style> <script> $(document).ready(function() { var interval = setInterval(function() { var height = $('.slideshow li:first').height(); $('.slideshow ul').animate({top: -height}, 1000, function() { $(this).append($('.slideshow li:first')).css({top: 0}); }); }, 2000); }); </script> </head> <body> <div class="slideshow"> <ul> <li><img src="image-1.jpg" alt=""></li> <li><img src="image-2.jpg" alt=""></li> <li><img src="image-3.jpg" alt=""></li> </ul> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值