动画轮播效果

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
@keyframes lun {
0%,20% { transform:translate(0px); }
25%,40% { transform:translate(-600px); }
45%,60% { transform:translate(-1200px); }
65%,80% { transform:translate(-1800px); }

}
@-webkit-keyframes lun{
0%,20% { transform:translate(0px); }
25%,40% { transform:translate(-600px); }
45%,60% { transform:translate(-1200px); }
65%,80% { transform:translate(-1800px); }

}
#div1 {
position: absolute;
width: 600px;
height: 300px;
overflow: hidden;
border-radius:5px;
}
#tu img {
float: left;
width:600px;
height:300px;
}
#tu {
position: absolute;
width: calc(600px * 4);
}
.move{
animation:20s;
-webkit-animation: lun 20s ease 2s infinite normal;
}

</style>
</head>
<body>
<div id="div1">
<div id="tu" class="move">
<img src="images/ad1.jpg">
<img src="images/ad2.jpg">
<img src="images/ad3.jpg">
<img src="images/ad4.jpg">
</div>
</div>
</body>
</html>

时间： 2025-01-02 01:11:35

动画轮播效果的相关文章

js 多动画轮播效果

图片:轮播.jpg 如图,所示的轮播,不但要切换大的背景图,还有文字及其它一些图片,也要动画显示. 当然,这个效果的实现,网上有类似的插件. 不过,也可以自己写出来. 下面我们就一起来看看.燥起来吧!!! 第一步:         大家暂时不要考虑动态这些的,就是把要轮播的页面及内容,全部显示出来.         ( 注:轮播一般也称幻灯片播放,下面,我们就把每一次图片的切换,称为幻灯片的切换,每一张幻灯片就用一个LI来实现,而每个幻灯片里还可以包含其它信息,文字,图片都可以,将它们用div包

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

网站——如何实现轮播效果

实现轮播效果需要运用到的知识: DOM操作 定时器 事件运用 Js动画 函数递归 无限滚动 原理:控制图片列表的“left”值来显示相应的图片 组成部分<div id="container">: <div id="list">//图片列表 <div id="list" style="left:-600px">//当图片的宽度全部为600px时 <img src=""

基本_移动类型轮播效果_框架

一.基本元素: D:display window;用户浏览的窗口: S:scroll window;存放内容的大容器:通过移动来改变显示的内容: C:content;内容信息: B:button;按钮,多种样式,可选: 二.思路: 通过移动S 的位置,由于C位于S中,所有的C将会同时跟随S而移动. 在D中显示的内容将会被改变. 三.html结构: 1 <div class=”D”> 2 <div class=”S”> 3 <div class=”C”>content&l

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

简单的一个轮播效果

刚刚学了Jquery,写了一个简单的图片滑动,但不是完成品. <!DOCTYPE html> <meta content="text/html" charset="utf-8"/><html><head> <title></title> <link href="css/lunbo.css" rel="stylesheet"/> <scri

用JQ去实现一个轮播效果

前提:对于这几天学到的用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div class="inner"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img s

点击轮播图片左右button，实现轮播效果

点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width(); //图片展示区外围div的大小 //注:若为整数,前边不能再加var.否则会被提示underfine p_count =

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body