master

分支 (1)

管理

管理

master

Carousel-figure
/
完整轮播图.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            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: yellow;
        }

        #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: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="all" id='box'>
    <div class="screen">
        <ul>
            <li><img src="images/1.jpg" width="500" height="200"/></li>
            <li><img src="images/2.jpg" width="500" height="200"/></li>
            <li><img src="images/3.jpg" width="500" height="200"/></li>
            <li><img src="images/4.jpg" width="500" height="200"/></li>
            <li><img src="images/5.jpg" width="500" height="200"/></li>
        </ul>
        <ol>
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<!--common.js文件中my$和animate的函数-->
<script src="common.js"></script>
<script>
    //获取box层
    var box=my$("box");
    //获取screen层
    var screen=box.children[0];
    //获取screen层宽度
    var imgWidth=screen.offsetWidth;
    //获取ul
    var ul=screen.children[0];
    //获取ul中li标签
    var lis=ul.children;
    //获取ol
    var ol=screen.children[1];
    //获取焦点层
    var arr=my$("arr");
    //创建ol中li标签，并添加事件
    for(var i=0;i<lis.length;i++){
        var li=document.createElement("li");
        li.index=i;//添加一个自定义属性，将来移动图片的时候用
        ol.appendChild(li);
        li.innerHTML=parseInt(i+1);
        li.onmouseover=function(){//鼠标进入事件
            //设置当前li的样式---排他
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].removeAttribute("class");
            }
            this.className="current";
            //设置图片
            var pic=parseInt(this.index);
            var target=-pic*imgWidth;
            animate(ul,target);
        };
    }
    //设置页面加载时默认的ol中样式
    ol.children[0].className="current";
    //创建ul中最后一个li，和第一个一样
    var li=lis[0].cloneNode(true);
    ul.appendChild(li);
    //进入层显示和隐藏焦点层
    box.onmouseover=function(){//鼠标进入事件
        arr.style.display="block"; //显示焦点层
        clearInterval(setId);//清理计时器
    };
    box.onmouseout=function(){//鼠标离开事件
        arr.style.display="none";//隐藏焦点层
        setId=setInterval(rightHandle,1000);//继续开始计时器
    };
    setId=setInterval(rightHandle,1000);//页面加载时开始自动播放
    //右焦点事件
    var pic=0;
    my$("right").onclick=rightHandle;
    function rightHandle(){
        if(pic==ol.children.length){//pic=5
            pic=0;
            ul.style.left="0px";
        }
        pic++;
        animate(ul,-pic*imgWidth);
        //设置ol中span的样式
        if(pic==ol.children.length){//pic=5
            ol.children[0].className="current";
            ol.children[ol.children.length-1].removeAttribute("class");
        }else{
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].removeAttribute("class");
            }
            ol.children[pic].className="current";
        }
    }
    //左焦点事件
    my$("left").onclick=function(){
        if(pic==0){
            pic=ol.children.length;
            ul.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ul,-pic*imgWidth);
        for(var j=0;j<ol.children.length;j++){
            ol.children[j].removeAttribute("class");
        }
        ol.children[pic].className="current";
    };


</script>


</body>
</html>