图片无缝 滚动 不用JS 可以实现吗

html-css08

图片无缝 滚动 不用JS 可以实现吗,第1张

可以。假如是自动的横向滚动就可以

html是静态的显示,所以他只能保证显示的内容而不是显示的动画所以无法解决动态问题。

css3增加了许多的动画效果,所以当你期望没有任何事件进行,图片在可视界面里面自动滚动的话,css3是可以实现的。

如果是用鼠标进行滚动,那么就必须使用js。

html是内容的静态展示。

css是样式的渲染。

js是事件的触发。

我都是用的layui,直接可以一个元素绑定实例化网页链接,这里可以看实例

引入layui.js后就可以用了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>carousel模块快速使用</title>

<link rel="stylesheet" href="/static/build/layui.css" media="all">

</head>

<body>

<div class="layui-carousel" id="test1">

<div carousel-item>

<div>条目1</div>

<div>条目2</div>

<div>条目3</div>

<div>条目4</div>

<div>条目5</div>

</div>

</div>

<!-- 条目中可以是任意内容,如:<img src="">-->

<script src="/static/build/layui.js"></script>

<script>

layui.use('carousel', function(){

var carousel = layui.carousel

//建造实例

carousel.render({

elem: '#test1'

,width: '100%' //设置容器宽度

,arrow: 'always' //始终显示箭头

//,anim: 'updown' //切换动画方式

})

})

</script>

</body>

</html>