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 ...
随机推荐
- CxImageJPG
typedef struct tag_ExifInfo { char Version [5]; //EXIF 信息版本 char CameraMake [32]; //DC 制造商 char Came ...
- unity 变体 随手记
1 #pragma multi_compile AAA BBB#pragma multi_compile CCC DDDAAA CCCAAA DDDBBB CCCBBB DDD------------ ...
- Vue 的生命周期 详细解析(使用场景等)
Vue生命周期图: 一.生命周期图的解读 new Vue():首先需要创建一个 Vue的实例对象 Init Events & Lifecycle :初始化:生命周期.事件(如:v-once), ...
- 2347. 最好的扑克手牌 (Easy)
问题描述 2347. 最好的扑克手牌 (Easy) 给你一个整数数组 ranks 和一个字符数组 suit .你有 5 张扑克牌,第 i 张牌大小为 ranks[i] ,花色为 suits[i] . ...
- 统计学习导论（ISLR）（三）：线性回归（超详细介绍）
统计学习导论(ISLR) 参考资料: The Elements of Statistical Learning An Introduction to Statistical Learning 统计学习 ...
- Linux 服务器安全扫描
工具一:Nmap 1. 探测网络中活跃的主机 nmap -sP 10.0.105.1/24 :探测10.0.105网段中的全部主机 2. 探测主机系统版本 nmap -O IP :探测指定IP的相关数 ...
- fork子进程父进程死掉之后，getppid()不为1的解决办法
代码例子:程序在执行之后,会一直死在while中,打印发现当父进程被终止,getppid() 的值也不为1 pid_t pid;if((pid = fork()) < 0){ printf(&q ...
- SQL server 清空数据库所有表
use [数据库名]GOdeclare @sql varchar(8000)while (select count(*) from sysobjects where type='U')>0beg ...
- 【shell脚本实战】脚本#35 分析每个用户使用的磁盘空间大小
#!/bin/bash #设置 一个变量代表临界值,看看是否能超过这个值,单位是MB MAXDISKUSAGE=20000 #cut -d: -f1,3 /etc/passwd | awk -F: ' ...
- Kubernetes 平台中的日志收集
准备 关于容器日志 Docker 的日志分为两类,一类是 Docker 引擎日志:另一类是容器日志.引擎日志一般都交给了系统日志,不同的操作系统会放在不同的位置. 本文主要介绍容器日志,容器日志可以理 ...