用BOM来实现轮播图效果

最新推荐文章于 2023-02-02 22:33:13 发布

吗吗哈哈

最新推荐文章于 2023-02-02 22:33:13 发布

阅读量606

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44715697/article/details/108925484

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

来来来，JavaScript核心基础语句送给你们
 学JS你不会DOM算真的学会了吗？
对JavaScript中的事件进行疯狂处理
 用BOM来实现轮播图效果
 我们来实现创建JavaScript中的自定义对象
 JS中构造函数的原型prototype
还不明白JS中的内置对象吗？快来这里！
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

BOM简介

1. JavaScript由三部分组成：

ECMAScript 核心语法 ES6+
DOM文档对象模型，核心对象是document，用来操作页面文档
BOM浏览器对象模型，核心对象是window，用来操作浏览器

在这里插入图片描述

2. window对象

常用属性：

名称	含义
history	有关客户访问过的URL的信息
location	有关当前URL的信息，子级DOM对象
document	表示浏览器窗口中的HTML文档，子级DOM对象

<script>
	//window是最顶层对象，可以省略不写
	console.log(window.document);
	//console.log(document);
	console.log(history)
	console.log(location);
</script>

常用方法：

方法名	含义
alert()	显示一个带有提示信息和确定按钮的警告框
prompt()	显示一个带有提示信息、文本输入框、确定和取消按钮的输入框，返回值为输入的数据
confirm()	显示一个带有提示信息、确定和取消按钮的确认框，确定返回true，取消返回false
open(url,name,options)	打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout(fn,delay)	设置一次性定时器，在指定毫秒值后执行某个函数
setInterval(fn,delay)	设置周期性定时器，周期性循环执行某个函数
clearTimeout(timer)	清除一次性定时器
clearInterval(timer)	清除周期性定时器
scrollTo(xpos,ypos)	把内容滚动到指定的坐标，即设置滚动条的偏移位置
scrollBy(xnum,ynum)	把内容滚动到指定的像素值，即设置滚动条的偏移量

<script>
	//1.alert()
	alert(111);
	window.alert(111);
	
	//2.prompt()
	var name = prompt('请输入用户名：');
	console.log(name);
	
	//3.confirm()
	var flag = confirm('确定要删除吗？');
	console.log(flag);
	
	//4.open()
	function f1(){
		open('用户信息管理.html','user','width=200px,height=200px');
	}
	//5.setTimeout()
	var timer1;
	var timer2;
	function f2(){
		//两秒后执行
		timer = setTimeout(function(){
			console.log('喝光大佬的卡布奇诺');
		},2000);	//单位为毫秒
		//setTimeout(f1,2000);   //f1后面不能由小括号
	}

	//6.setInterval
	function f3(){
		//每隔两秒执行一次
		setInterval(function(){
			console.log('喝光大佬的卡布奇诺');
		},2000);
	}

	//7.clearTimeout()
	function f4(){
		clearTimeout(timer1);
	}

	//8.clearInterval()
	function f5(){
		clearTimeout(timer2);
	}

	//9.scrollTo()和scrollBy()
	function f6(){
		scrollTo(0,200);	//向下移动到200px的位置
		scrollBy(0,200);	//向下再移动200px
	}
</script>
<body>
	<button onclick="f1()">打开一个新窗口</button>
	<button onclick="f2()">一次性计时器</button>
	<button onclick="f3()">周期性计时器</button>
	<button onclick="f4()">关闭一次性计时器</button>
	<button onclick="f5()">关闭周期性计时器</button>
	<button onclick="f6()">移动滚动条</button>
</body>

常用事件：

事件名	含义
onclick	鼠标单击
onload	页面加载完成
onscroll	窗口滚动条滑动

3. Location对象

常用属性：

href 设置或返回地址栏中的url

常用方法：

reload() 重新加载当前页面

<script>
	function doLocation(){
		//获取地址栏中的href
		console.log(location.href);

		//设置地址栏中的href，实现页面的跳转
		location.href = 'https://www.baidu.com';

		//刷新页面
		location.reload();
	}
</script>
<body>
	<button onclick="doLocation">操作Location</button>
</body>

4. history对象

常用方法：

方法名	含义
back()	后退，加载history列表中的上一个url
foward()	前进，加载history列表中的下一个url
go(number)	浏览器移动指定的页面数

<script>
	function f1(){
		history.back();
	}

	function f2(){
		history.forward();
	}

	function f3(){
		history.go(1);	//等价于history.forward()
		history.go(-1);	//等价于history.back()
		history.go(0);;	//等价于location.reload();
	}
</script>
<body>
	<button onclick="f1()">后退</button>
	<button onclick="f2()">前进</button>
	<button onclick="f3()">切换历史</button>
</body>

轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .d1 {
        width: 524px;
        height: 190px;
        border: 1px solid #ccc;
        position: relative;
    }
    .d2 {
        position: absolute;
        bottom: 15px;
        right: 50px;
    }
    .d2 span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #fff;
        text-align: center;
        line-height: 20px;
        font-size: 13px;
        border: 1px solid #ccc;
    }
    .active {
        background: #333!important;
        color: #fff;
    }
</style>
<script>
    var imgs = ['images/ad-01.jpg','images/ad-02.jpg','images/ad-03.jpg','images/ad-04.jpg'];
    var i=0;
    var timer;

    function show(index){
        //判断是否手动操作
        if(index){
            i = index-1;
            clearTimeout(timer);
            
        }
        //显示图片
        document.querySelector('#img').src=imgs[i];

        //设置当前激活的样式
        document.querySelectorAll('span').forEach(function(item){
            item.classList.remove('active');
         });
        document.querySelector('.d2 span:nth-child('+(i+1)+')').classList.add('active');

        //自增
        i++;
        if(i>3){
            i=0;
        }

        //开启计时器 
        timer = setTimeout(show,2000);
    }

    window.onload = function(){
        show();
    }
</script>
<body>
    <div class="d1">
        <img src="images/ad-01.jpg" id="img">
        <div class="d2">
            <span onmouseover="show(1)" class="active">1</span>
            <span onmouseover="show(2)">2</span>
            <span onmouseover="show(3)">3</span>
            <span onmouseover="show(4)">4</span>
        </div>
    </div>
</body>
</html>

吗吗哈哈

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用BOM来实现轮播图效果

BOM简介1. JavaScript由三部分组成：ECMAScript 核心语法 ES6+DOM文档对象模型，核心对象是document，用来操作页面文档BOM浏览器对象模型，核心对象是window，用来操作浏览器2. window对象常用属性：名称含义history有关客户访问过的URL的信息location有关当前URL的信息，子级DOM对象document表示浏览器窗口中的HTML文档，子级DOM对象<script> //w
复制链接

扫一扫