<div class="CON--cen-pd3 clear aniview slow" data-av-animation="fadeIn">
<i class="layui-icon layui-icon-left" id="car_prev" style="font-size: 30px; color: #1E9FFF;position:relative;top: 6rem;right: 2.4rem;cursor:pointer;"></i>
<div class="profld position" id="indexcar" data-listnum="4">
<ol class='metlist'>
{dede:arclist typeid="8"}
<li class='list'><a href='[field:arcurl/]' title='[field:title/] ' target='_self' class='img'><img src='[field:picname/]' alt='[field:title/] ' title='[field:title/] ' width='120' /></a>
<h3><a href='[field:arcurl/]' title='[field:title/] ' target='_self'>[field:title/]</a></h3>
</li>
{/dede:arclist}
</ol>
</div>
<i class="layui-icon layui-icon-right next" id="car_next" style="font-size: 30px; color: #1E9FFF;position:relative;bottom: 8rem;left: 2.5rem;cursor:pointer;"></i>
</div>
<script type="text/javascript">
var _index5=0;
var timer = setInterval(function(){
_index5++;
var len=$("ol.metlist li").length;
if(_index5+6>len){
$("ol.metlist").stop().append($("ol.metlist").html());
}
$("ol.metlist").stop().animate({left:-_index5*173},1000);
},3000);

$("#car_next").click(function(){
_index5++;
var len=$("ol.metlist li").length;
if(_index5+6>len){
$("ol.metlist").stop().append($("ol.metlist").html());
}
$("ol.metlist").stop().animate({left:-_index5*173},1000);
});

$("#car_prev").click(function(){
if(_index5==0){
$("ol.metlist").prepend($("ol.metlist").html());
$("ol.metlist").css("left","-1380px");
_index5=7
}
_index5--;
$("ol.metlist").stop().animate({left:-_index5*173},1000);
});
</script>

<style>

/*专家团队*/
.position{position:relative;}
.CON--cen-pd3{
padding: 0 50px 12px;
min-height: 150px;
border:1px solid rgb(219, 226, 247);}
.CON--bot{padding-top:2px;}
.CON--bot .profld{ margin:0px; position: relative;
top: -0.5rem; right: 0rem; overflow:hidden; height: 190px;}
.CON--bot h3 span{ float:left; }
.CON--bot ol{ position: absolute; width: 2012em;height: 100%; }
.CON--bot ol li{ float:left; width: 173px; text-align:center; height: 100%;}
.CON--bot ol li a.img{ display:block; text-align:center; font-size:0px;height: 100%;}
.CON--bot ol li a.img img{ margin:auto; border:1px solid #d6d6d6;height: 78%;}
.CON--bot ol li h3{ font-weight:normal; margin-top:5px; height:20px; line-height:20px;
overflow:hidden;
font-size: 0.9rem;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
bottom: 2.5rem;}
.CON--bot .flip{width:70px; height:168px; float:left;
position:relative; top:45px; z-index:100;}
* html .CON--bot .flip{ width:70px;}
*html .CON--bot .flip{ width:70px;}
.CON--bot .next,.CON--bot .prev{width:35px;overflow: hidden;}
.CON--bot .next{background-position:-35px 0px; float:right; position:absolute; left:960px;}
.CON--bot .prev{
background-position: 0px 0px;
float: left;
position: relative;
left: 1.5rem;
bottom: 1.4rem;}
.fl{
margin: 1.8rem 0 0.8rem;
font-size: 1.2rem;
font-weight: 600;
}

/*专家团队*/

</style>

css走马灯,一步一停(专家介绍类型)的更多相关文章

  1. HTML&CSS基础-前端免费开发工具Hbuilder介绍

    HTML&CSS基础-前端免费开发工具Hbuilder介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 工欲善其事必先利其器,想要干好活得有一个好的工具. 一.文本编辑工 ...

  2. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  3. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  4. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  5. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  6. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

  7. 关于mysql安装到最后一步老是停留在starting server,显示无响应

    从昨天晚上到今天安装MySQL花了好长的时间,一直是在后面starting server 这部就显示无响应,查资料了解到是MySQL有残留,有些注册表文件需要手动清理,下面是具体方法. 1.先用卸载软 ...

  8. 为 Html 5 和 CSS 3.0 而生——Modernizr的介绍和使用

    传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Moderniz ...

  9. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

随机推荐

  1. JavaEE项目开发所需要的包(Struts2+Spring5+Hibernate5)

    在这里我只整理了轻量级JavaEE项目开发所需的包 @Auther MrZhangxd 2019-04-29  23:07:21 链接:https://pan.baidu.com/s/16I4KYah ...

  2. PHP 之验证码类封装

    一.效果图 二.类代码 <?php /** * Created by PhpStorm. * User: Yang * Date: 2019/8/13 * Time: 10:51 */ clas ...

  3. ROS indigo下Kinect v1的驱动安装与调试

    ROS indigo下Kinect v1的驱动安装与调试 本文简要叙述了在ROS indigo版本下Kinect v1的驱动安装与调试过程. 1. 实验环境 (1)硬件:  台式机和Kinect v1 ...

  4. JAVA基础知识|反射

    一.理解反射 1.1.基础概念 反射:在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为ja ...

  5. windows 连接 Linux 云服务器

    1.在我们购买了 阿里云 或者 腾讯云后,如果选择使用的是 Linux 系统,在 windows 上要远程连接,需要用到的是 putty 这一个软件 putty 官网:https://www.putt ...

  6. 怎样在VMware虚拟机中使用安装并设置Ubuntu系统

    1 2 3 4 5 6 7 分步阅读 Ubuntu 系统是一款优秀的.基于GNU/Linux 的平台的桌面系统. 当然,目前为止很多应用程序还完全不能允许运行在 Ubuntu 系统上,而且 Ubunt ...

  7. office很抱歉遇到一些临时服务器问题

    office2016登录很抱歉遇到一些临时服务器问题   主要问题:word不能进行发博客了.一直以为是cnblog服务器不稳定,今天才发现,word不能登录也就是不能联网. 查了原因,才知道是代理造 ...

  8. 使用rsync备份数据

    (1).实验环境与目标 源主机:youxi1 192.168.5.101 目标主机:youxi2 192.168.5.102 目标:将源主机youxi1的数据备份到youxi2上. rsync是C/S ...

  9. maven创建父项目和子项目

    创建父级项目 new    -----    others    ------ maven project 创建好后删除,pom.xml以外的文件 点击pom.xml文件,修改Packaging属性为 ...

  10. Swagger下载的zip文件无法打开,而且大小比直接下载的要大

    以前写的一个rest提供的是浏览器下载zip包的功能,前端界面调用rest可以正常地下载. 今天使用Swagger来调试下载功能时,发现下载的zip包打不开,而且大小也比直接在浏览器中输入rest地址 ...