前端开发基础之js轮播(焦点+鼠标+自动)

最新推荐文章于 2022-05-25 14:48:40 发布

DHRMM999

最新推荐文章于 2022-05-25 14:48:40 发布

阅读量263

点赞数

分类专栏： js特效学习笔记

本文链接：https://blog.csdn.net/DHRMM999/article/details/82585518

版权

js特效学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

css样式控制

<style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
                border: 0;
            }
            .all{
                width: 490px;
                height: 170px;
                padding: 7px;
                border: 1px solid #ccc;
                margin: 100px auto;
                position: relative;
            }
            .all .screen{
                width: 490px;
                height: 170px;
                overflow: hidden;
                position: absolute;
            }
            .all .screen li{
                width: 490px;
                height: 200px;
                overflow: hidden;
                float: left;
            }
            .all .screen ul{
                position: absolute;
                left: 0;
                top: 0;
                width: 2940px;
            }
            .all .screen ol{
                position: absolute;
                right: 10px;
                bottom: 10px;
                line-height: 20px;
                text-align: center;
            } 
            .all .screen ol li{
                float: left;
                width: 20px;
                height: 20px;
                background: #fff;
                border: 1px solid #ccc;
                margin-left: 10px;
                cursor: pointer;
            }
            .all .screen ol li.active{
                background: red;
                color: white;
            }
            #arr{

            }
            #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 #left{
                display: none;
            }
            #arr #right{
                right: 5px;
                display: none;
                left: auto;
            }
        </style>

html

<body>
        <div class="all" id="all">
            <div class="screen" id="screen">
                <ul id="ul">
                <li><a href="#"><img src="../images/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="../images/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="../images/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="../images/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="../images/05.jpg" alt="" /></a></li>
                </ul>
                <ol></ol>
                <div id="arr">
                    <span id="left">
                    <
                    </span>
                    <span id="right">
                    >
                    </span>
                </div>
            </div>
        </div>
    </body>

js控制

获取相关元素

//一.获取相关元素
        var box = document.getElementById("all");
        var ul = box.children[0].children[0];
        var ol = box.children[0].children[1];
        var ulLiArr = ul.children;

根据图片个数创建ol里的li个数

    //1.复制第一张图片所在的li，填入到ul中
        var newLi = ulLiArr[0].cloneNode(true);
        ul.appendChild(newLi);
            //2.生成相关的ol中的li
        for(var i=0;i<ulLiArr.length-1;i++){
            var newOlLi = document.createElement("li");
            newOlLi.innerHTML = i+1;
            ol.appendChild(newOlLi);
        }
            //3.点亮ol中的第一个li
        var olLiArr = ol.children;
        ol.children[0].className="active";

3.鼠标移动到小方块上轮播

//三.鼠标移动轮播
        for(var j=0;j<olLiArr.length;j++){
            olLiArr[j].index = j;
            olLiArr[j].onmousemove = function(){
                for(var k=0;k<olLiArr.length;k++){
                olLiArr[k].className="";
                }
                olLiArr[this.index].className="active";
                animate(ul,-this.index*ul.children[0].offsetWidth);
                Key = square = this.index;
            }
        }

4.添加定时器

var timer = null;
        var Key=0;
        var square =0;
        timer = setInterval(autoplay,2000);
        function autoplay(){
            Key++;
            square++;
            if(Key>olLiArr.length){
                Key=1;
                ul.style.left=0;
            }
            animate(ul,-Key*ul.children[0].offsetWidth);
            square = square>olLiArr.length-1?0:square;
            for(var i=0;i<olLiArr.length;i++){
                olLiArr[i].className="";
            }
            olLiArr[square].className="active";
        }

5.点击左右焦点轮播

var btnArr = box.children[0].children[2].children;
        btnArr[0].onclick = function(){
            Key--;
            square--;
            if(Key<0){
                Key=4;
                ul.style.left = -5*ul.children[0].offsetWidth+"px";
            }
            animate(ul,-Key*ul.children[0].offsetWidth);
            square=square<0?olLiArr.length-1:square;
            for(var i=0;i<olLiArr.length;i++){
                olLiArr[i].className="";
            }
            olLiArr[square].className="active";
        }
        btnArr[1].onclick =function(){
            autoplay();
        }

//3.1鼠标移上图片显示左右焦点
        var arrleft  = box.children[0].children[2].children[0];
        var arrright  = box.children[0].children[2].children[1];
        var b = document.getElementById("screen");
        b.onmouseover = function(){
            arrleft.style.display = "block";
            arrright.style.display = "block";
        }
        b.onmouseout = function(){
            arrleft.style.display = "none";
            arrright.style.display = "none";
        }

6.开启关闭定时器

//五.鼠标移开开启定时器,鼠标放上关闭定时器
        box.onmouseover = function(){
            clearInterval(timer);
        }
        box.onmouseout = function(){
            timer = setInterval(autoplay,2000);
        }

7.封装轮播

function animate(obj,target){
            clearInterval(obj.timer);
            var speed = target>ul.offsetLeft?15:-15;
            obj.timer = setInterval(function(){
                var result = target-ul.offsetLeft;
                obj.style.left = obj.offsetLeft+speed+"px";
                if(Math.abs(result)<=15){
                    clearInterval(obj.timer);
                    obj.style.left = target+"px";
                }
            },10);
        }

DHRMM999

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发基础之js轮播(焦点+鼠标+自动)

css样式控制&lt;style type="text/css"&gt; *{ padding: 0; margin: 0; list-style: none; border: 0; } .a...
复制链接

扫一扫