使用html和css实现轮播图的两种方法

使用html和css实现轮播图的两种方法,第1张

animation-name: 规定需要绑定到选择器的 keyframe 名称。

animation-duration: 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function: 规定动画的速度曲线。

animation-delay:规定在动画开始之前的延迟。

animation-iteration-count: 规定动画应该播放的次数。

animation-direction:规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间,按照总时间的百分比分配;

以三张图片为例制作轮播图,若将最后的数值设置为100%,出现问题在于最后一张到第一张的切换没有动画;尝试给最后一张图片到第一张图片的动画时间,但是中间的切换效果是从最后一张向右滑动直到显示出第一张图,其效果反人类,不美观;但是,通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

方法与一中大致相同,唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张图片导入,会出现最后一张图片到第一张图片没有动画效果;通过尝试在最后的一张图片后面在添加一张与第一张相同的图片,可实现循环的效果;

问题在于图片一直处于切换状态,中间没有停顿;

可以上jquery插件库这个网站看看,大部分资源是免费的。轮播图也有好多。

bootstrap也提供轮播模板。

自己写的话,假如放3张轮播图,pic1,pic2,pic3。创建一个ul,ul中放5张图片,顺序是pic3,pic1,pic2,pic3,pic1,这样衔接起来。设置ul的宽度是500%,li的宽度是20%,这样图片就能一字排开,设置ul的父元素的样式为overflow:hidden再用CSS3的动画属性,让li中的图片元素位移或者让ul位移。

静态获取图片写法,给定图片的个数,用js实现轮播图自动转换。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<!-- *******设置样式********** -->

<style type="text/css">

.show_div{

width: 400px

height: 400px

margin:  0 auto

border: 2px solid block

overflow: hidden

}

.scroll_div{

width: 2000px

height: 400px

}

.scroll_div img{

width: 400px

height: 400px

float: left

}

</style>

<!-- end -->

</head>

<body>

<div class="show_div">

<div class="scroll_div">

<img src="img/b.jpg" alt="">

<img src="img/c.jpg" alt="">

<img src="img/d.jpg" alt="">

<img src="img/a.jpg" alt="">

<img src="img/b.jpg" alt="">

</div>

</div>

</body>

<!-- *********js代码******** -->

<script type="text/javascript">

var scrollDiv = document.getElementsByClassName("scroll_div")[0]

// 定义初始值

var left =0

// 定义一个定时器 走一步

function move(){

var timer = setInterval(function(){

left --

if (left <= -1600) {

left = 0

}

if (left % -400 == 0) {

clearInterval(timer)

timer = null

}

scrollDiv.style.marginLeft = left + "px"

},10)

}

// 定义一个定时器 每隔固定时间 走一张

setInterval(function(){

move()

},5000)

</script>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7196100.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存