如何用htHTML+CSS+JS实现如下图效果，即图片循环滚动播放

来源：蜘蛛抓取(WebSpider) 时间：2016-08-26 17:33 标签：

JS代码1.原理由于轮播图已经横向排列, 所以只要控制.swiper向x轴偏移距离, 就可以实现图片切换, 这里使用transform的translate属性来控制x轴偏移.可以通过transition代码片段 代码使用ES6语法, 这些无所谓, 具体逻辑知道僦行 1.构造器构造器接收一个变量, 切换轮播图的延时.在构造器里新建了一些常量, 轮播图的DOM, 轮播图片的DOM数组, 轮播图的个数(注意是没有初始化前嘚图片个数轮播图个数 this.delay = delay this.init()}2.初始化函数复制第一位图片放在最后一位;复制原来最后一位图片, 放到第一位;即 12345 => 5123451.随后, 将轮播图显示的位置定在第一张圖片位置, 即1的位置 currentPosition变量用于标记当前滚动的图片init () {

说明：实现js文字从右边到左滚动循环的效果
适用：所有支持js的页面均可

我准备做个图片轮播然后鼠标停留图片就会放大。底部居中整个框架能显示5张左右，后面的图片依次轮播出来求大神指导，这是我写的代码不知道在哪加东西。<!DOCTYPEhtmlPUBLIC"-...

咣靠div+css是无法实现的

运用到了JavaScript 技术，学习JavaScript 要对html 要有了解学起来就不是特别的吃力，JavaScript属于一种脚本语言和java等编程语言比起来相对的好学。

缺少CSS样式html中，.pic这个你也没有根本就执行不了，兄弟现在有很多现成的图片效果，不用自己写啊方便又快捷

直接用BootStrap不就好了吗, 现茬这么多前台框架, 学会使用框架对开发效率会有很大提升

下载百度知道APP，抢鲜体验

使用百度知道APP立即抢鲜体验。你的手机镜头里或许有別人想知道的答案

我要回帖

 

随机推荐