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 ...
随机推荐
- 2345 ip
121.201.101.43 img1.2345.com121.201.101.43 img2.2345.com121.201.101.43 img3.2345.com121.201.101.43 i ...
- Visual Studio NuGet的地址（记录）
NuGet源地址 : https://nuget.org/api/v2/ https://api.nuget.org/v3/index.json (推荐)
- JS学习-Promise
Promise 一个 Promise 必然处于以下几种状态之一: 待定(pending): 初始状态,既没有被兑现,也没有被拒绝. 已兑现(fulfilled): 意味着操作成功完成. 已拒绝(rej ...
- 启动Apache出现错误Port 80 in use by "Unable to open process" with PID 4!
22:15:30 [Apache] Problem detected! 22:15:30 [Apache] Port 80 in use by "Unable to open proce ...
- cadence报错because the library part is newer than the part in the design cache.Select the part in the cache and choose Design-Update Cache，and then place the part again.
cadence报错because the library part is newer than the part in the design cache.Select the part in the ...
- developer mode
PS C:\Windows\system32> reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersio ...
- 从零搭建php环境-php8-扩展-redis
一.下载1.https://pecl.php.net/get/redis-5.3.2.tgz下载到本地,文件传输上传到 /usr/local/src/2.wget -P /usr/local/src/ ...
- Linux 使用vsftpd服务传输文件
文件传输协议 FTP是一种在互联网中进行文件传输的协议,基于客户端/服务器模式,默认使用20.21号端口,其中端口20(数据端口)用于进行数据传输,端口21(命令端口)用于接受客户端发出的相关FTP命 ...
- Pnetlab中锐捷镜像反复重启或telnet无法键入内容
PNETLab 版本: 5.2.7 或 5.3.3等 锐捷镜像版本: V1.03 故障详情: 基于前文的系统环境和锐捷镜像.替换后的yml文件,更新PnetLAB版本到5.3.3后,设备循环重启,无法 ...
- python机器学习——朴素贝叶斯算法
背景与原理: 朴素贝叶斯算法是机器学习领域最经典的算法之一,仍然是用来解决分类问题的. 那么对于分类问题,我们的模型始终是:用$m$组数据,每条数据形如$(x_{1},...,x_{n},y)$,表示 ...