利用js实现轮播图

组成：由7张图片，7个下标组成，一个左右边键组成

实现功能：

1.每个下标对应每张图片，下标跟随图片循环播。

2.鼠标移入图片时图片下标同时暂停，移入下标时找到对应的图片，鼠标移出继续循环播放。

3.鼠标单击右边键图片向前切换一张，单击左边键图片向后切换一张。

第一步：运用html中的无序列表ul li和有序列表ol  li将html结构构建出来

<div id="div">
            <ul id="ul">
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/6.jpg"/></li>
                <li><img src="img/7.jpg"/></li>
            </ul>
            <ol>
                <li onmouseover="tex(1)" onmouseout="txt(1)">1</li>
                <li onmouseover="tex(2)" onmouseout="txt(2)">2</li>
                <li onmouseover="tex(3)" onmouseout="txt(3)">3</li>
                <li onmouseover="tex(4)" onmouseout="txt(4)">4</li>
                <li onmouseover="tex(5)" onmouseout="txt(5)">5</li>
                <li onmouseover="tex(6)" onmouseout="txt(6)">6</li>
                <li onmouseover="tex(7)" onmouseout="txt(7)">7</li>
            </ol>
            <span id="one"></span>
            <span id="two"></span>
        </div>

然后画css样式

<style>
            *{
                margin: 0;
                padding: 0;
            }
            ul li{
                 450px;
                height: 270px;
                float: left;
                display: block;
            }
            ul{
                 3150px;
                height: 270px;
            }
            div{
                 450px;
                height: 270px; 
                overflow: hidden;
            }
            ol{
            position: absolute;
            top: 240px;
            left: 150px;
            }
            ol li{
                 20px;
                height: 20px;
                background: lightskyblue;
                float: left;
                display: block;
                margin: 0 10px;
                text-align: center;
            }
            #one{
                position: absolute;
                   left: 0px;
                top: 100px;
                   background-color: rgba(150,150,150,0.5);
                 30px;
                  height: 60px;
                  }
            #two{
                position: absolute;
                left: 420px;
                top: 100px;
                   background-color: rgba(150,150,150,0.5);
                 30px;
                   height: 60px
                  }
        </style>

获取对象，定义全局变量

var one1=document.getElementById("one");
            var two1=document.getElementById("two");
            var ul1=document.getElementById("ul")
            var ool=document.getElementsByTagName("ol")[0]
            var aaa=ool.getElementsByTagName("li")
            var div1=document.getElementById("div")
            var count=0;
            var itl;/*全局变量作用整个script*/

实现图片和下标同时循环

function show(){
            clearInterval(itl)
            for(var i=0;i<7;i++){/*让所有下标背景颜色还原*/
                        aaa[i].style.backgroundColor="lightskyblue"
                                           }
            ul1.style.marginLeft=-450*count+"px"/*图片循环*/
            aaa[count].style.backgroundColor="red"/*下标循环*/
            count++;
            if(count>6){
            count=0
            }
            itl=setInterval(show,1000)
            }
            show();

鼠标移入图片暂停，移出继续循环

div1.onmouseover=function(){
                clearInterval(itl)
            }
            div1.onmouseout=function(){
                itl=setInterval(show,1000)
            }

鼠标移入下标下标背景颜色变红，切换到对应图片；鼠标移除图片下标继续往后循环

function tex(obj){
                for(var i=0;i<7;i++){
            aaa[i].style.backgroundColor="lightskyblue"}
            aaa[obj-1].style.backgroundColor="red"
            ul1.style.marginLeft=-450*(obj-1)+"px"
            }
            function txt(all){
                count=all-1
            }

鼠标单击左边键图片向后切换，鼠标单击右边键图片向前切换

one1.onclick=function(){
                count--;
                if(count<0){
                    count=6
                }
                ul1.style.marginLeft=-450*count+"px"
                for(var i=0;i<7;i++){
                                aaa[i].style.backgroundColor="lightskyblue"}
                aaa[count].style.backgroundColor="red"
            }
            two1.onclick=function(){
                count++;
                if(count>6){
                    count=0
                }
                ul1.style.marginLeft=-450*count+"px"
                for(var i=0;i<7;i++){
                                aaa[i].style.backgroundColor="lightskyblue"}
                aaa[count].style.backgroundColor="red"
            }