js/css实现图片轮播
实现样式：
tplb.css
ul,
li {
padding: 0;
margin: 0;
list-style: none;
} .adver {
margin: 0 auto;
width: 700px;
overflow: hidden;
height: 454px;
position: relative;
background: url(../img/adver01.jpg);
} ul {
position: absolute;
bottom: 10px;
z-index: 100;
width: 100%;
text-align: center;
} ul li {
display: inline-block;
font-size: 10px;
line-height: 20px;
font-family: "楷体";
margin: 0 1px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #333333;
text-align: center;
color: #ffffff;
} .arrowLeft,
.arrowRight {
position: absolute;
width: 30px;
background: rgba(0, 0, 0, 0.2);
height: 50px;
line-height: 50px;
text-align: center;
top: 200px;
z-index: 150;
font-family: "楷体";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: none;
} .arrowLeft {
left: 10px;
} .arrowRight {
right: 10px;
} li:nth-of-type(1) {
background: orange;
}
html(6张图片轮播)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/tplb.css" />
</head>
<body>
<!--
1.完成点击 》、《 切换图片
1.1 鼠标进到 id="adver" 显示 》《
1.2 给绑定 》 单击事件，将 div 的背景图片切换到下一张
1.2.1 将所有被切换的图片存储在数组
1.2.2 存储的是现在显示的图片的在数组中的索引
1.2.3 将 索引 + 1，通过计算之后的索引到数组中获取图片的路径
1.2.4 如果 计算索引 超过了数组长度，索引从 0 开始
1.3 给绑定 》 单击事件，将 div 的背景图片切换到上一张
1.2.1 将 索引 - 1，通过计算之后的索引到数组中获取图片的路径
1.2.2 如果 计算索引 < 0，索引从 数组.length-1 开始
1.4 移出 id="adver" 隐藏 》《
--> <div class="adver" id="adver" onmouseover="showArrow()" onmouseout="hideArrow()">
<ul>
<li onclick="changeNumberImage(this)">1</li>
<li onclick="changeNumberImage(this)">2</li>
<li onclick="changeNumberImage(this)">3</li>
<li onclick="changeNumberImage(this)">4</li>
<li onclick="changeNumberImage(this)">5</li>
<li onclick="changeNumberImage(this)">6</li>
</ul>
<div class="arrowLeft" id="arrowLeft" onclick="changePrveImage()">
<
</div>
<div class="arrowRight" id="arrowRight" onclick="changeNextImage()">
>
</div>
</div>
<script type="text/javascript">
// 存储所有被切换的图片
var imageArray = ["url('img/adver01.jpg')", "url('img/adver02.jpg')", "url('img/adver03.jpg')",
"url('img/adver04.jpg')", "url('img/adver05.jpg')", "url('img/adver06.jpg')",
];
// 存储的是现在显示的图片的在数组中的索引
var index = 0;
//轮播
function show(){
setInterval(function(){
index++;
if(index>=imageArray.length){
index=0;
}
//切换图片地址，修改li样式
changeImage();
},3000)
}
show(); // 鼠标移入
function showArrow(){
document.getElementById("arrowLeft").style.display="block";
document.getElementById("arrowRight").style.display="block";
}
//鼠标移出
function hideArrow(){
document.getElementById("arrowLeft").style.display="none";
document.getElementById("arrowRight").style.display="none";
}
//切换下一张图片
function changeNextImage(){
// 1 将 索引 + 1，通过计算之后的索引到数组中获取图片的路径
index++;
// 2 如果 计算索引 超过了数组长度，索引从 0 开始
if(index>=imageArray.length){
index=0;
}
changeImage();
}
//切换上一张图片
function changePrevImage(){
// 将 索引 - 1
index--;
// 如果 计算索引 < 0，索引从 数组.length-1 开始
if(index<0){
index=imageArray.length-1;
}
changeImage();
}
//切换图片
function changeImage(){
// 数组中获取图片的路径
var imagePath=imageArray[index];
// 设置图片背景图片
document.getElementById("adver").style.background=imagePath;
// 获取所有的li
var lis=document.getElementsByTagName("li");
// 将 所有的li设置为黑色
for(var i=0;i<lis.length;i++){
lis[i].style.backgroundColor="black";
}
lis[index].style.backgroundColor="orange";
}
//点击li切换图片
function changeNumberImage(liObj){
// 获取到 li 内容
var liNumber=liObj.innerText;
// 通过 liNumber 获取图片的下标
index=parseInt(liNumber)-1;
changeImage();
}
</script>
</body>
</html>
js/css实现图片轮播的更多相关文章
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯CSS 多图片轮播
今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...
- JS+html--实现图片轮播
大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js定时器实现图片轮播
效果展示如下: setInterval(moverleft,3000);定时器设置为3秒,而且实现图片下方的小圆点序号跟图片对应,点击小圆点也能切换图片. 代码如下: <!DOCTYPE htm ...
- 项目实践2:使用html和CSS实现图片轮播
好家伙, 使用html和CSS实现简单的图片切换(轮播图) 来自:(7条消息) 使用CSS实现简单的图片切换(轮播图)_LexingtonCV16的博客-CSDN博客_css实现图片切换 1.首先创建 ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- html学习之路--简单图片轮播
一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...
- 推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
- HTML图片轮播
一.纯 CSS 实现图片轮播 引自原文作者:南张人 原文链接:https://blog.csdn.net/u011848617/article/details/80468463 理论基础 CSS3 a ...
随机推荐
- 像MIUI一样做Zabbix二次开发（1）——MIUI之于Android，乐维监控之于Zabbix
摘要 文章主要介绍:7年做Zabbix二次开发,讲述那些从技术方向的选择,到开发.架构设计.深度定制,到我们的更多前瞻性想法. 关于MIUI "专注.极致.口碑.快"成了雷布斯的口 ...
- SAP 内外交货单过账
* 交货单过账 DATA: LS_HEADER_DATA TYPE BAPIIBDLVHDRCON, LS_HEADER_CONTROL TYPE ...
- Access denied You do not have access to chat.openai.com. The site owner may have set restrictions that prevent you from accessing the site.解决办法
报错 Access denied You do not have access to chat.openai.com. The site owner may have set restrictions ...
- 软件离线许可（License）实现原理
我们经常使用各种开发软件,比如IntelliJ IDEA.Navicat.Visual Studio等,这些软件都有一个特点,就是要收费.一般是我们需要去购买一个许可,然后输入这个许可到软件里就能够使 ...
- Linux环境使用Docker安装MySql
系统环境: CentOS 7.6 64位(同样适用于Ubuntu) 安装步骤: 1.创建文件夹 /home/docker/mysql/config /home/docker/mysql/data 2. ...
- ORACLE备份脚本（3-RMAN0级全备）
创建目录 mkdir -p /bak/level0 mkdir -p /bak/arch chown -R oracle:oinstall /bak/ vi rmanlevel0.sh # ...
- 2022-04-13内部群每日三题-清辉PMP
1项目经理正在执行一个资源有限,期限严格的引人注目的项目.该项目目前落后于进度,对资源平衡的审查显示,一些资源被过度分配.请问项目经理应该怎么办? A.重新分配来自另一个项目不必要的资源 B.为延迟的 ...
- [mysql练习]多行结果合并问题练习
有一个scores表,表结构和数据如下: id, stu_id, name,course, grade 1,1,贾万, 语文, 902,1,贾万 ,数学 ,100 3,2,毛之远 ,语文 ,974,2 ...
- JS篇(009)-javascript 对象的几种创建方式
答案: 第一种:Object 构造函数创建 var Person = new Object(); Person.name = "Nike"; Person.age = 29; 这行 ...
- Unity算法之A星- A*Pathfind Project插件的使用
先上效果图 首先上 插件地址 (如果没有积分可以评论区联系我) 1.下载完毕后导入unity 导入后可以在Component里面看到多了一个Pathfinding选项 2.场景搭建 首先新建两个层 ...