图片文字定时左右轮播

在这里插入图片描述

HTMl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  href="CSS/teaminduce.css"  rel='stylesheet' type='text/css' />
    <script src="js/teaminduce.js"></script>
</head>
<body>
<div class="all" id='all'>
    <div class="screen" id="screen">
        <ul id="ul">
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/01.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>T-group工作室</h1>
                    <h2><img src="images/T-Group.png" width="100px" height="100px" ></h2>
                    <p>T-group团队专注网站技术研究开发。团队有摄影、PS、Flash等能力的美工；Js、Css3、Html5、Jquery、Struts2、Spring和微信开发等能力的技。
                        团队现由人事、技术、采编组成，各部门分工明确，相辅相成。</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/17';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray;margin-top: -25px"><img src="images/01.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>恒创VR工作室</h1>
                    <h2><img src="images/vr.png" width="170px" height="150px" style="margin-top: -28px"></h2>
                    <p> 恒创VR工作室，成立于2017年，由平顶山学院计算机学院（软件学院）所承办，在刘雨瞳，徐丽敏，彭伟国三位老师的带领下，现已有30余名工作室成员。
                        本工作室一定会在未来的道路披荆斩棘，奋勇向前，必定取得佳绩！</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/19';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/03.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>服务器工作室</h1>
                    <h2><img src="images/server.png" width="100px" height="86px" ></h2>
                    <p>社团以服务器端后台开发为重点，以简单的前端技术为支撑，以软件测试为辅助进行有针对性的学习和开发。
                        团队的目标是学会基本的前端技术, 掌握高级框架原理，提升数据库设计及应用能力。</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/18';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/03.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>向量工作室</h1>
                    <h2><img src="images/vector.png" width="130px" height="120px" style="margin-top: -13px"></h2>
                    <p>向量工作室是一个致力于java、Android、数据库技术学习和移动APP应用开发的团体。
                        我们是一个有方向有力量，始终坚持以开发高质量软件为方向，以对软件开发的热情为力量来体现“向量”的涵义。</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/23';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/03.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>ACM算法公关</h1>
                    <h2><img src="images/acm.png" width="130px" height="120px" style="margin-top: -13px"></h2>
                    <p>  ACM算法攻关部提倡并实施“发展有规划,学习有目标,交流有平台,进步有帮带”的管理，其独特的学习,
                        讨论,分享,比赛方式可以对IT人所需素质进行全面培养。</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/23';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/03.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>你猜工作室</h1>
                    <h2><img src="images/guess.png" width="130px" height="120px" style="margin-top: -13px"></h2>
                    <p>你猜工作室是一个专为学习和制作UI交互设计而组成的创新团队。
                        我们社团社员分别来自计算机学院的各个专业,用不同的专业背景和扎实的专业知识为基础</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/23';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/03.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>青云技术服务工作室</h1>
                    <h2><img src="images/cloud.png" width="130px" height="120px" style="margin-top: -13px"></h2>
                    <p>青云技术服务工作室是河南青云信息技术有限公司在校孵化团队。团队在院系老师的指导下自主管理，自主学习。
                        团队致力于web应用开发、ios开发、安卓开发、混合开发、物联网开发等多个技术开发。</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/23';">了解更多</a></div>
                </div>
            </li>
            <li>
                <div class="Choices_left" style="background: gray"><img src="images/03.jpg" width="100%" height="100%" ></div>
                <div class="Choices_right">
                    <h1>网络安全工作室</h1>
                    <h2><img src="images/netsafe.png" width="130px" height="120px" style="margin-top: -13px"></h2>
                    <p>网络安全攻防技术训练营创团队以网络安全技术研究与应用为基础成立，以国内各类安全大赛为动力，
                        以网络攻防技术实战及企业安全应用为目标。旨在募集对网络安全技术有兴趣且有特长的应届在校成员。</p>
                    <div class="Choicesbut"><a onclick="window.location.href='${pageContext.request.contextPath}/team/teamShow/23';">了解更多</a></div>
                </div>
            </li>
        </ul>
        <ol>

        </ol>
        <div id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>
</div>
</body>
</html>

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;
}

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;i<ul.children.length-1;i++){
            var olNewLi=document.createElement("li");
            olNewLi.innerHTML=i+1;
            ol.appendChild(olNewLi);
        }
        var olLiArr=ol.children;
        olLiArr[0].className="current";
        //4.鼠标放到ol的li上切换图片
        for(var i=0;i<olLiArr.length;i++){
            olLiArr[i].index=i;
            olLiArr[i].onmouseover=function () {
                for(var j=0;j<olLiArr.length;j++){
                    olLiArr[j].className="";
                }
                this.className="current";
                //鼠标放到小的方块上的时候索引值和key以及square同步
                key=square=this.index;
                animate(ul,-this.index*imgWidth);
            }
        }
        //5.添加定时器
        var timer = setInterval(autoPlay,3000);

        //固定向右切换图片
        //两个定时器（一个记录图片，一个记录小方块）
        var key = 0;
        var square = 0;
        function autoPlay(){
            //通过控制key的自增来模拟图片的索引值，然后移动ul
            key++;
            if(key>olLiArr.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;i<olLiArr.length;i++){
                olLiArr[i].className = "";
            }
            olLiArr[square].className = "current";
        }

        //鼠标放上去清除定时器，移开后在开启定时器
        all.onmouseover = function () {
            div.style.display = "block";
            clearInterval(timer);
        }
        all.onmouseout = function () {
            div.style.display = "none";
            timer = setInterval(autoPlay,3000);
        }
        //6.左右切换图片（鼠标放上去隐藏，移开显示）
        spanArr[0].onclick=function () {
            key--;
            if(key<0){
                ul.style.left = -imgWidth*(olLiArr.length)+"px";
                key = olLiArr.length-1;
            }
            animate(ul,-key*imgWidth);
            square--;
            if(square<0){
                square = olLiArr.length-1;
            }
            for(var i=0;i<olLiArr.length;i++){
                olLiArr[i].className = "";
            }
            olLiArr[square].className = "current";
        }
        spanArr[1].onclick=function () {
            autoPlay();
        }

        //函数封装
        function animate(ele,target){
            clearInterval(ele.timer);
            var speed = target>ele.offsetLeft?10:-10;
            ele.timer = setInterval(function () {
                var val = target - ele.offsetLeft;
                ele.style.left = ele.offsetLeft + speed + "px";
                if(Math.abs(val)<Math.abs(speed)){
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            },10)
        }
    }

图片文字定时左右轮播

猜你喜欢