轮播图切换

最新推荐文章于 2021-01-19 17:45:41 发布

天下1281

最新推荐文章于 2021-01-19 17:45:41 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/boysky0015/article/details/70835096

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

做一个功能时，首先需要理清思路，然后再开始写代码,这样会事半功倍
轮播图切换的思路：
1.首先需要获取元素节点
2.封装运动函数
3.开启定时器，每3s向左轮播一次
4.封装函数move，调用运动函数startMove
(1)遍历按钮的列表，判断i和j是否相等，如果相等，加样式
(2)给按钮添加点击事件
(3)封装轮播图移动的函数btnMove
(4)给上下页添加点击事件

运动函数的封装

    **/*
     *  getStyleAttr(obj,attr)
     *  obj 目标对象
     *  attr 属性
     */
    function getStyleAttr(obj,attr){
        //getComputedStyle 是一个可以获取当前元素所有最终使用的css属性
        if(window.getComputedStyle){
            return getComputedStyle(obj,null)[attr];
        }
        return obj.currentStyle[attr]; //支持IE8
    }
    /*
     * move(obj,attr,target,fn)
     * onj 目标对象
     * attr 属性
     * target 目标值
     * fn 回调函数
     */
    function startMove(obj,attr,target,fn){
        //关闭之前的定时器
        clearInterval(obj.timer);
        //重新开启定时器
        obj.timer = setInterval(function(){
            //1.获取当前值
            var current = 0;
            if(attr == "opacity"){
                current = parseFloat(getStyleAttr(obj,attr) * 100);
                current = Math.round(current);
            }else{
                current = parseFloat(getStyleAttr(obj,attr));
                current = Math.round(current);
            }
            //2.设定一个速度
            var speed = 0;
            speed = (target - current) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //3.判断是否到达目标值
            if(current == target){
                clearInterval(obj.timer);
                //回调
                if(fn){
                    fn(); 
                }
                return; //退出函数，不在进行下面的语句
            }
            //4.运动
            if( attr == "opacity"){
                obj.style.opacity = (current + speed ) /100;
                obj.style.filter = "alpha(opacity" + current + speed + ")"; 
            }else{
                obj.style[attr] = current + speed + "px";
            }
        },30)
    }**

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        #box{
            width: 600px;
            height: 300px;
            position: relative;
            top: 0;
            left: 0;
            overflow: hidden;
            margin: 100px auto;
        }
        ul,li{
            float: left;
        }
        img{
            width: 600px;
            height: 300px;
        }
        #list{
            width: 5000px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        #btn{
            width: 120px;
            height: 30px;
            position: absolute;
            top: 250px;
            left: 280px;
        }
        #btn li{
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 30px;
            background: yellow;
            margin-right: 10px;
            cursor: pointer;
        }
        #btn .active{
            background: red;
        }
        #btnLeft{
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background: #f99;
            position: absolute;
            top: 130px;
            left: 30px;
            cursor: pointer;
        }
        #btnRight{
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background: #f99;
            position: absolute;
            top: 130px;
            left: 520px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
        </ul>
        <ul id="btn">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div id="btnLeft">&lt;</div>
        <div id="btnRight">&gt;</div>
    </div>
    <script src="move.js"></script>
    <script>
        var oLi = document.getElementById("list");
        var imgList = oLi.getElementsByTagName("li");
        var oBtn = document.getElementById("btn");
        var btnList = oBtn.getElementsByTagName("li");
        var btnLeft = document.getElementById("btnLeft");
        var btnRight = document.getElementById("btnRight");
        //初始化定时器
        var timer = 0;
        var i = 0;
        oLi.innerHTML += oLi.innerHTML;
        //console.log(imgList.length);
        //获取图片的高度
        var iWidth = imgList[0].offsetWidth;
        //console.log(iWidth);
        timer = setInterval(move,3000);
        function move(){
            i++;
            var iLeft = -i * iWidth;
            startMove(oLi,"left",iLeft,next);
            //轮播图切换时，相应的按钮也会切换
            for(var j=0;j<btnList.length;j++){
                if(i==j){
                    btnList[j].className = "active";
                }else{
                    btnList[j].className = "";
                }
                if(i == imgList.length/2){
                    btnList[0].className = "active";
                }
            }
        }
        //next
        function next(){
            if(i >= imgList.length/2){
                oLi.style.left = 0;
                i=0;
            }
        }
        //给按钮添加点击事件
        for(var j=0;j<btnList.length;j++){
            btnList[j].index = j;
            btnList[j].onclick = function(){
                //console.log(this.index);
                //var i = this.index - 1; //拜托前面不要加var 
                i = this.index - 1;
                btnMove();
            }
        }
        //轮播图移动的函数
        function btnMove(){
            move();
            clearInterval(timer);
            timer = setInterval(move,3000);
        }
        //左按钮
        btnLeft.onclick = function(){
            if(i == 0){
                i = imgList.length/2 - 2;
            }else{
                i = i - 2;
            }
            btnMove();
        }
        //右按纽
        btnRight.onclick = function(){
            next();
            btnMove();
        }
    </script>
</body>
</html>