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二次开发（6）——应用场景和规划
其他使用场景 监控做为一个重要的管理手段,存在很多的使用场景,简单列举我们现在碰到的: 1. 系统集成 事件管理流程集成:配置管理集成,自动CI获取,提高CMDB准确.实时性:知识库集成,提高 ...
- linux 服务器 重命名
vim /etc/hosts 追加 10.10.134.68 RmcbTestDB3 RmcbTestDB3 # ip 名称 名称 127.0.0.1 localhost ...
- 91、mysql批量删除表
## 存储过程实现 drop PROCEDURE if EXISTS rush; create PROCEDURE rush() BEGIN ## 创建临时表,插入快照数据 drop table if ...
- Java数组之三种初始化及内存分析
内存分析 Java内存 堆: 1.存放new的对象和数组 2.可以被所有的线程共享,不会存放别的对象引用 栈: 1.存放基本变量类型(会包含这个基本类型的具体数值) 2.引用对象的变量(会存放这个引用 ...
- 058_Component Bundles
- 宽字符集（unicode）操作函数 （转）
字符分类: 宽字符函数 普通C函数 描述 iswalnum() isalnum() 测试字符是否为数字或字母 iswalpha() isalpha() 测试字符是否是字母 iswcntrl() isc ...
- 【2020NOI.AC省选模拟#2】A. 旋转
题目链接 原题解: 把每个点的坐标视为复数,那么每次询问就是区间求平均数(先求和然后除以个数).一个点绕着原点旋转就是乘以$(\cos 60^\circ +i\sin 60^\circ)$. 一个点绕 ...
- CSS边框（实线、虚线、破折号）
1.CSS边框 border:1px solid red; /*实线*/ border:1px dotted red; /*虚线*/ border:1px dashed red; /*破折号*/
- ADC参悟
SFDR比信噪比大15dB,怎么跟应用联系起来,分别决定了啥?
- 廖雪峰JS知识点整理——快速入门
基本语法 1.每个语句以:结尾. 2.单行注释://... 3.多行注释:/*... ...*/ 数据类型和变量 运算 1.==自动转换数据类型在比较,不推荐使用 2.===不会转换数据类型,推荐使用 ...