图片文字定时左右轮播
HTMl
Title
-
T-group工作室
T-group团队专注网站技术研究开发。团队有摄影、PS、Flash等能力的美工；Js、Css3、Html5、Jquery、Struts2、Spring和微信开发等能力的技。
团队现由人事、技术、采编组成，各部门分工明确，相辅相成。
-
恒创VR工作室
恒创VR工作室，成立于2017年，由平顶山学院计算机学院（软件学院）所承办，在刘雨瞳，徐丽敏，彭伟国三位老师的带领下，现已有30余名工作室成员。
本工作室一定会在未来的道路披荆斩棘，奋勇向前，必定取得佳绩！
-
服务器工作室
社团以服务器端后台开发为重点，以简单的前端技术为支撑，以软件测试为辅助进行有针对性的学习和开发。
团队的目标是学会基本的前端技术, 掌握高级框架原理，提升数据库设计及应用能力。
-
向量工作室
向量工作室是一个致力于java、Android、数据库技术学习和移动APP应用开发的团体。
我们是一个有方向有力量，始终坚持以开发高质量软件为方向，以对软件开发的热情为力量来体现“向量”的涵义。
-
-
-
青云技术服务工作室
青云技术服务工作室是河南青云信息技术有限公司在校孵化团队。团队在院系老师的指导下自主管理，自主学习。
团队致力于web应用开发、ios开发、安卓开发、混合开发、物联网开发等多个技术开发。
-
网络安全工作室
网络安全攻防技术训练营创团队以网络安全技术研究与应用为基础成立，以国内各类安全大赛为动力，
以网络攻防技术实战及企业安全应用为目标。旨在募集对网络安全技术有兴趣且有特长的应届在校成员。
<
>
CSS
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
width:1200px;
height:430px;
padding:7px;
/* border:1px solid #ccc;*/
margin:100px auto;
position:relative;
}
.screen{
width:1200px;
height:430px;
overflow:hidden;
position:relative;
}
.Choices_left {
width:600px;
height:430px;
float:left;
}
.Choices_right{
width:600px;
height:430px;
float:left;
background-color: rgba(221,223,222,0.93);
}
.Choices_right h1{
width:600px;
height:30px;
line-height:30px;
float:left;
text-align:center;
font-size:28px;
margin-top:20px;
color:#464646;
}
.Choices_right h2{
width:570px;
height:30px;
line-height:30px;
float:left;
text-align:center;
font-size:28px;
margin-top:15px;
margin-left: 16px;
color:#464646;
}
.Choices_right p{
width:570px;
height:70px;
float:left;
margin-left:20px;
text-align:center;
font-size:18px;
color:#606060;
margin-top:78px;
}
.Choicesbut{
width:197px;
height:49px;
float:left;
border:1px solid #bfbfbf;
background-color:rgba(255,255,255,0.7);
text-align:center;
line-height:49px;
color:#606060;
font-size:22px;
margin-left:195px;
margin-top:67px;
}
.screen li{
width:1200px;
height:430px;
overflow:hidden;
float:left;
}
.screen ul{
position:absolute;
left:0;
top:0px;
width:12000px;
}
.all ol{
position:absolute;
right:15px;
bottom:2px;
line-height:20px;
text-align:center;
}
.all ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer;
}
.all ol li.current{
background:cornflowerblue;
}
#arr {
display: none;
}
#arr span{
width:40px;
height:40px;
position:absolute;
left:5px; top:50%;
margin-top:-20px;
background:#000;
cursor:pointer;
line-height:40px;
text-align:center;
font-weight:bold;
font-family:'黑体';
font-size:30px;
color:#fff;
opacity:0.3;
border:1px solid #fff;
}
#arr #right{
right:15px;
left:auto;
}
JS
window.onload=function () {
//需求：无缝滚动。
//思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候
// 直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
// 第一张图片，然后滑动到第二张
//步骤：
//1.获取事件源及相关元素。（老三步）
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children;
//2.复制第一张图片所在的li,添加到ul的最后面。
var ulNewLi = ul.children[0].cloneNode(true);
ul.appendChild(ulNewLi);
//3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
for(var i=0;iolLiArr.length){
//图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
ul.style.left = 0;
key = 1;
}
animate(ul,-key*imgWidth);
//通过控制square的自增来模拟小方块的索引值，然后点亮盒子
//排他思想做小方块
square++;
if(square>olLiArr.length-1){//索引值不能大于等于5，如果等于5，立刻变为0；
square = 0;
}
for(var i=0;iele.offsetLeft?10:-10;
ele.timer = setInterval(function () {
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val)