【前端】手写轮播图·教程2

一颗不甘坠落的流星

已于 2024-02-19 15:17:44 修改

阅读量209

点赞数 1

分类专栏：工作随记文章标签： js 轮播图 js轮播图

于 2021-02-03 19:46:34 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/113615867

版权

工作随记专栏收录该内容

67 篇文章 1 订阅

订阅专栏

文章目录

效果图：

在这里插入图片描述

需求分析：

根据图片数量生成对应的小圆点
克隆第一个li，放到ul的最后面
最开始显示第一个li,点亮第一个小圆点
点击left按钮，看上一张，点亮小圆点
点击right按钮，看下一张，点亮小圆点
点击小圆点，看相应图片，点亮小圆点
可以自动轮播
鼠标移入，停止轮播
鼠标移出，开始轮播

源代码：

HTML部分

<div class="all" id='all'>
    <div class="screen" id="screen">
        <ul id="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 id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>
</div>

css部分

<style>
 * {
    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>

JavaScript部分

为了简化代码，先封装一些常用的自定义构造函数

<script>
// 返回指定dom节点的attr样式值
function getStyle(dom,attr){
	if(window.getComputedStyle){// 是否有getComputedStyle方法
		//非IE低版
		return window.getComputedStyle(dom,null)[attr];
	}else{
		//IE低版
		return dom.currentStyle[attr];
	}
}
// 封装一个缓动的动画函数，需要时调用即可
function animate(dom,json,callback){
	/* 
        dom:要运动的节点
        json:要运动的样式名
        callback:运动完成的回调函数
    */
    clearInterval(dom.timer);//要用定时器，先清定时器
    //要运动的定时器
    dom.timer = setInterval(function(){
		var flag = true;
		//json有几个属性，就要运动几次
		for(var attr in json){
			//获取当前位置
			var current = parseInt(getStyle(dom,attr));
			// 计算速度
			var speed = json[attr] - current > 0 ? Math.ceil((json[attr]-current)/10):Math.floor((json[attr]-current)/10);
			//计算下一个位置
			var next = current + speed;
			//定位元素
			dom.style[attr] = next+'px';
			//判断是否达到目标
			if(next != json[attr]){
				flag = false;
			}
		}
		if(flag){
			clearInterval(dom.timer);
		}
	},20)// 每20毫秒
}
// 封装light，点亮第num个小圆点
function light() {
    // 干掉所有人
    for (var i = 0; i < pointArr.length; i++) {
        pointArr[i].className = "";
    }
    // 留下我一个
    pointArr[point].className = "current";
}
// 下一张
function autoplay() {
    // li的索引要增加1
    // point的索引要增加1
    num++;
    point++;
    // li的索引的临界点
    if (num > liArr.length - 1) {
        num = 1;
        ul.style.left = 0;
    }
    // point的索引的临界点
    point = point > pointArr.length - 1 ? 0 : point
    // ul进行移动
    animate(ul, { left: -num * width })
    // 点亮小圆点
    light()
}
</script>

js主体部分，需要用到封装的函数，调用即可

<script>
var box = document.getElementById('screen');//总容器
var ul = document.getElementById('ul');//图片li的容器
var ol = box.children[1];//小圆点容器
var prev = box.children[2].children[0];//上一张按钮
var next = box.children[2].children[1];//下一张按钮
var num = 0;//num记录当前li的索引
var point = 0;//point记录小圆点的索引
var width = ul.children[0].offsetWidth;//记录一个li的宽度
// 1 根据图片数量生成对应的下圆点
for(var i=0; i<ul.children.length; i++){
	var newPoint = document.createElement('li');
	newPoint.index = i;
	newPoint.innerHTML = i + 1;
	ol.appendChild(newPoint);
}
// 2 克隆第一个li，放到ul的最后面
var newLi = ul.children[0].cloneNode(true);
ul.appendChild(newLi);

// 3 点亮第一个小圆点
var pointArr = ol.children;//所有小圆点的集合
var liArr = ul.children;//所有的li的集合
light();

// 4 点击left按钮，看上一张，点亮小圆点
prev.onclick = function(){
	num--;
	point--;
	// li的索引的临界点
	if(num < 0){
		ul.style.left = -(liArr.length-1)*width+'px';
		num = liArr.length - 2;
	}
	// point的索引的临界点
	point = point<0?pointArr.length-1:point;
	// ul进行移动
	animate(ul,{left:-num*width});
	// 点亮小圆点
    light();
}
// 5 点击right按钮，看下一张，点亮小圆点
next.onclick = autoplay;
// 6 点击小圆点，看相应图片，点亮小圆点
for(var i=0; i<pointArr.length; i++){
	pointArr[i].onclick = function(){
		//可以获取当前被点击的小圆点的索引
		var next = this.index;
		animate(ul, { left: -next * width });
		// 更新当前索引，并点亮小圆点
		num = next;
		point = next;
		light();
	}
}
// 7 可以自动轮播
var timer = setInterval(autoplay,3000);
// 8 鼠标移入，停止轮播
box.onmouseenter = function(){
	clearInterval(timer);
}
// 9 鼠标移出，开始轮播 
box.onmouseleave = function(){
	clearInterval(timer);
	timer = setInterval(autoplay, 3000);
}
</script>

总代码

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; 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>

    <style>

    </style>
</head>

<body>
    <script></script>
    <div class="all" id='all'>
        <div class="screen" id="screen">
            <ul id="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 id="arr">
                <span id="left"><</span>
                <span id="right">></span>
            </div>
        </div>
    </div>
    <script>
        // 返回指定dom节点的attr样式值
        function getStyle(dom, attr) {
            if (window.getComputedStyle) {// 是否有getComputedStyle方法
                //非IE低版
                return window.getComputedStyle(dom, null)[attr];
            } else {
                //IE低版
                return dom.currentStyle[attr];
            }
        }
        // 封装一个缓动的动画函数，需要时调用即可
        function animate(dom, json, callback) {
            /* 
                dom:要运动的节点
                json:要运动的样式名
                callback:运动完成的回调函数
            */
            clearInterval(dom.timer);//要用定时器，先清定时器
            //要运动的定时器
            dom.timer = setInterval(function () {
                var flag = true;
                //json有几个属性，就要运动几次
                for (var attr in json) {
                    //获取当前位置
                    var current = parseInt(getStyle(dom, attr));
                    // 计算速度
                    var speed = json[attr] - current > 0 ? Math.ceil((json[attr] - current) / 10) : Math.floor((json[attr] - current) / 10);
                    //计算下一个位置
                    var next = current + speed;
                    //定位元素
                    dom.style[attr] = next + 'px';
                    //判断是否达到目标
                    if (next != json[attr]) {
                        flag = false;
                    }
                }
                if (flag) {
                    clearInterval(dom.timer);
                }
            }, 20)// 每20毫秒
        }
        // 封装light，点亮第num个小圆点
        function light() {
            // 干掉所有人
            for (var i = 0; i < pointArr.length; i++) {
                pointArr[i].className = "";
            }
            // 留下我一个
            pointArr[point].className = "current";
        }
        // 下一张
        function autoplay() {
            // li的索引要增加1
            // point的索引要增加1
            num++;
            point++;
            // li的索引的临界点
            if (num > liArr.length - 1) {
                num = 1;
                ul.style.left = 0;
            }
            // point的索引的临界点
            point = point > pointArr.length - 1 ? 0 : point
            // ul进行移动
            animate(ul, { left: -num * width })
            // 点亮小圆点
            light()
        }

        var box = document.getElementById('screen');//总容器
        var ul = document.getElementById('ul');//图片li的容器
        var ol = box.children[1];//小圆点容器
        var prev = box.children[2].children[0];//上一张按钮
        var next = box.children[2].children[1];//下一张按钮
        var num = 0;//num记录当前li的索引
        var point = 0;//point记录小圆点的索引
        var width = ul.children[0].offsetWidth;//记录一个li的宽度
        // 1 根据图片数量生成对应的下圆点
        for (var i = 0; i < ul.children.length; i++) {
            var newPoint = document.createElement('li');
            newPoint.index = i;
            newPoint.innerHTML = i + 1;
            ol.appendChild(newPoint);
        }
        // 2 克隆第一个li，放到ul的最后面
        var newLi = ul.children[0].cloneNode(true);
        ul.appendChild(newLi);

        // 3 点亮第一个小圆点
        var pointArr = ol.children;//所有小圆点的集合
        var liArr = ul.children;//所有的li的集合
        light();

        // 4 点击left按钮，看上一张，点亮小圆点
        prev.onclick = function () {
            num--;
            point--;
            // li的索引的临界点
            if (num < 0) {
                ul.style.left = -(liArr.length - 1) * width + 'px';
                num = liArr.length - 2;
            }
            // point的索引的临界点
            point = point < 0 ? pointArr.length - 1 : point;
            // ul进行移动
            animate(ul, { left: -num * width });
            // 点亮小圆点
            light();
        }
        // 5 点击right按钮，看下一张，点亮小圆点
        next.onclick = autoplay;
        // 6 点击小圆点，看相应图片，点亮小圆点
        for (var i = 0; i < pointArr.length; i++) {
            pointArr[i].onclick = function () {
                //可以获取当前被点击的小圆点的索引
                var next = this.index;
                animate(ul, { left: -next * width });
                // 更新当前索引，并点亮小圆点
                num = next;
                point = next;
                light();
            }
        }
        // 7 可以自动轮播
        var timer = setInterval(autoplay, 3000);
        // 8 鼠标移入，停止轮播
        box.onmouseenter = function () {
            clearInterval(timer);
        }
        // 9 鼠标移出，开始轮播 
        box.onmouseleave = function () {
            clearInterval(timer);
            timer = setInterval(autoplay, 3000);
        }
    </script>
</body>

</html>

所用图片：

在这里插入图片描述

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

一颗不甘坠落的流星

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端】手写轮播图·教程2

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：根据图片数量生成对应的小圆点克隆第一个li，放到ul的最后面最开始显示第一个li,点亮第一个小圆点点击left按钮，看上一张，点亮小圆点点击right按钮，看下一张，点亮小圆点点击小圆点，看相应图片，点亮小圆点可以自动轮播鼠标移入，停止轮播鼠标移出，开始轮播源代码：HTML部分<div class="all" id='all'> <div class="screen" id="sc
复制链接

扫一扫