JavaScript(三十六)——JavaScript编写的轮播页面
发布日期:2021-06-30 16:35:35
浏览次数:3
分类:技术文章
本文共 1490 字,大约阅读时间需要 4 分钟。
JavaScript编写的轮播页面
HTML:
轮播完善
- 1
- 2
- 3
- 4
- 5
<>
CSS:
*{ padding: 0; margin: 0;}/*总体界面样式*/#box{ width: 600px; height: 240px; margin: 0 auto; position: relative;}/*左右切换按钮*/.bt{ width: 40px; height: 60px; background-color: rgba(0,0,0,0.2); color: #FFFFFF; font-size: 30px; font-weight: 50px; /*居中*/ line-height: 60px; text-align: center; /*绝对定位*/ position: absolute; /*鼠标没移动到上面时隐藏*/ display: none;}#left{ left: 0; top: 100px;}#right{ right: 0; top: 100px;}/*下面轮播小圆点*/#list{ position: absolute; bottom: 10px; left: 200px; /*消去前面的点*/ list-style: none;}#list li{ /* 浮动变成一行 */ float: left; width: 20px; height: 20px; border-radius: 50%; background-color: #aaa; /*居中*/ text-align: center; line-height: 20px; margin-left: 10px;}
JavaScript:
//需要用到的标签var jsbox = document.getElementById("box");var jspic = document.getElementById("pic");var left = document.getElementById("left");var right = document.getElementById("right");var jslistarr = document.getElementsByTagName("li");//第一个li设置为红色jslistarr[0].style.backgroundColor = "red"//启动一个定时器去更换pic中的src属性var currentPage = 1//改变页面方法function changePage(){ if(currentPage == 6){ currentPage = 1 }else if(currentPage == 0){ currentPage = 5 } jspic.src = "img/"+currentPage+".png" //清空小圆点颜色 for(var i = 0;i
运行结果:
当鼠标没有移入界面时图片自动轮播
鼠标移入界面时,出现左右按钮,并且停止自动轮播
可以点击左右按钮来轮播图片,也可以将鼠标移动到对应的小圆点上进行轮播
一起学习,一起进步 -.- ,如有错误,可以发评论
转载地址:https://kongchengji.blog.csdn.net/article/details/98495608 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
初次前来,多多关照!
[***.217.46.12]2024年04月28日 11时07分38秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
ACM路上的一大失误
2019-04-30
HDOJ2049 不容易系列之(4)——考新郎
2019-04-30
CodeForces 248B - Chilly Willy - 找规律
2019-04-30
POJ-2418 Hardwood Species(Trie树)(map)
2019-04-30
HDU-4300 Clairewd’s message + 4333(扩展KMP)
2019-04-30
HDU 1592 Half of and a Half(高精度)
2019-04-30
POJ-3304 Segments(计算几何)
2019-04-30
UVA-11538 Chess Queen(数学)
2019-04-30
UVA-11401 Triangle Counting(数学优化)
2019-04-30
Codeforces Round #369 (Div. 2)
2019-04-30
UVA 11426 GCD - Extreme (II)(欧拉函数)
2019-04-30
HDU-2838 Cow Sorting(树状数组)
2019-04-30
POJ-2299 Ultra-QuickSort(树状数组)(离散化)
2019-04-30
基于SSM的兼职论坛系统的设计与实现
2019-04-30
基于java的图书管理系统的设计与实现
2019-04-30
基于java的SSM框架理财管理系统的设计与实现
2019-04-30
基于java的ssm框架就业信息管理系统的设计
2019-04-30
基于java的ssm框架的旅游网站设计与实现
2019-04-30