本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播;点击左右切换按钮轮播;下方点击按钮轮播。具体实现步骤如下:

(效果图)

html部分代码如下:

<div class="slidebox">
<ul class="ul1" id="ul1">
<li><img src="img/solid.png" width="100%" height="500px">
<p class="slide-p1">走进酒文化&nbsp品味历史悠酒</p>
</li>
<li><img src="img/jiuwh.jpg" width="100%" height="500px">
<p class="slide-p2">
<p class="slide-p21">酒<br>之<br>历<br>史</p>
<p class="slide-p22">酒<br>之<br>常<br>识</p>
<p class="slide-p23">酒<br>之<br>文<br>化</p>
<p class="slide-p24">酒<br>之<br>工<br>艺</p>
<p class="slide-p25">酒<br>之<br>典<br>故</p>
</p>
</li>
<li><img src="img/jiu-1.jpg" width="100%" height="500px">
<p class="slide-p3">酒香飘百年、历久弥香,既得益于得天独厚的酿造环境<br>更缘于人们长期以来对传统工艺的矢志坚守、对品质把控的一丝不苟</p>
</li>
<li><img src="img/jiu2.jpg" width="100%" height="500px">
<p class="slide-p4">
"和",《说文》解为"相应也",《广雅》解为谐也。和乐之本也,强调的是和谐、协调;"发而皆中节谓之和",倾向于平衡、稳健。中华文明历来强调天人合一、尊重自然,"万物各得其和以生,各得其养以成"。
</p>
</li>
</ul>
<div class="left-botton indexs" id="left-botton">
&lt;
</div>
<div class="right-botton indexs" id="right-botton">
&gt;
</div>
<ul class="ul2 indexs" id="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

css部分代码如下:

.slidebox {
width: 100%;
height: 500px;
position: relative;
} .slidebox ul {
margin: 0;
padding: 0;
list-style: none;
} .ul1 {
width: 100%;
height: 100%;
} .ul1>li {
position: absolute;
top: 0;
left: 0;
} .left-botton {
margin-left: 50px;
width: 80px;
height: 80px;
background: whitesmoke;
text-align: center;
color: skyblue;
line-height: 70px;
position: absolute;
font-size: 50px;
top: 195px;
left: 0;
border-radius: 100%;
opacity: 0;
} .slidebox:hover .left-botton {
opacity: 0.8;
transition: 0.5s;
} .right-botton {
margin-right: 50px;
width: 80px;
height: 80px;
background: whitesmoke;
opacity: 0;
text-align: center;
color: skyblue;
line-height: 70px;
position: absolute;
font-size: 50px;
top: 195px;
right: 0;
border-radius: 100%;
} .slidebox:hover .right-botton {
opacity: 0.8;
transition: 0.5s;
} .left-botton:hover {
cursor: pointer;
color: whitesmoke;
opacity: 1;
background: skyblue;
} .right-botton:hover {
cursor: pointer;
color: whitesmoke;
opacity: 1;
background: skyblue;
} .ul2 {
position: absolute;
bottom: 25px;
right: 560px;
} .ul2>li {
width: 60px;
height: 10px;
background: white;
line-height: 20px;
float: left;
border-radius: 3px;
margin-right: 30px;
} .ul2>li:hover {
background: orangered;
cursor: pointer;
color: white;
} .ul2>li:nth-child(1) {
background: orangered;
color: white;
} .ul1>li:nth-child(1) {
z-index: 100;
} .indexs {
z-index: 200;
}

JS部分代码如下:

var imgs = document.getElementById("ul1").children; //找到需要操作的所有图片
var botton = document.getElementById("ul2").children; //找到需要操作的所有下方点击按钮
var leftbotton = document.getElementById("left-botton"); //找到需要操作的左切换按钮
var rightbotton = document.getElementById("right-botton"); //找到需要操作的右切换按钮
var index = 0; //标记当前展示图片的索引
var dingshiqi; //定义定时器
chongqi(); //调用重启定时器 //绑定定时器自动切换事件
function chongqi() {
dingshiqi = setInterval(function() {
index++; //跳转到下一张图片
if (index == imgs.length) {
index = 0;
} //使图片无限循环播放
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
}, 4000); //定时器每隔4秒自动跳转到下一张图片
} //绑定左切换按钮的点击事件
leftbotton.onclick = function() {
clearInterval(dingshiqi); //关闭定时器
index--; //跳转到上一张图片
if (index < 0) {
index = imgs.length - 1;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
chongqi(); //重启定时器
} //绑定右切换按钮的点击事件
rightbotton.onclick = function() {
clearInterval(dingshiqi); //关闭定时器
index++; //跳转到下一张图片
if (index > imgs.length - 1) {
index = 0;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
chongqi(); //重启定时器
} //绑定所有点击按钮的点击事件
for (let i = 0; i < imgs.length; i++) {
botton[i].onclick = function() {
clearInterval(dingshiqi); //关闭定时器
index = i;
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
}
imgs[index].style.cssText = "z-index:100;"; //显示当前图片
this.style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
chongqi(); //重启定时器
}
}

通过以上步骤就可以实现一个完整的轮播图效果了

超详细的原生JavaScript轮播图(幻灯片)的制作的更多相关文章

  1. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  3. JavaScript轮播图

    需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...

  4. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  5. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  6. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  7. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  9. js原生的轮播图

    <!DOCTYPE html>   <html>   <head>   <meta charset="UTF-8">   <t ...

随机推荐

  1. Linux创建RAID1_实战

    Linux创建RAID1实战 Linux创建RAID1 RAID1俗称镜像,它最少由两个硬盘组成,且两个硬盘上存储的数据均相同,以实现数据冗余 RAID1读操作速度有所提高,写操作理论上与单硬盘速度一 ...

  2. SSL数字证书颁发

    一.数字证书 1.数字证书实际上是存在于计算机上的一个记录,是由CA签发的一个声明,证明证书主体("证书申请者"拥有了证书后即成为"证书主体")与证书中所包含的 ...

  3. mate-notification-daemon stopping, Mate notifications timeout

    mate-notification-daemon stopping, Mate notifications timeout Ask Question Asked 9 days ago Viewed 1 ...

  4. 戴尔 R730xd 服务器更改管理口密码 图文教程

    一.开机根据提示按F2进入配置界面 - 选择中间的iDRAC Setting选项,回车确认 二.进入之后选择 user configuration 选项 三.在change password 处键入新 ...

  5. Chrome版本与chromedriver版本映射表

    chromedriver版本 支持的Chrome版本 v2.36 v64-66 v2.35 v62-64 v2.34 v61-63 v2.33 v60-62 v2.32 v59-61 v2.31 v5 ...

  6. C语言编程 菜鸟练习100题(51-60)

    [练习51]矩阵转置 0. 题目: 矩阵的转置 1. 分析: 练习使用 for 循环嵌套,多维数组的表达. 2. 程序: #include <stdio.h> int main() { i ...

  7. 第11讲 | TCP协议(上):因性恶而复杂,先恶后善反轻松

    第11讲 | TCP协议(上):因性恶而复杂,先恶后善反轻松 TCP 包头格式 我们先来看 TCP 头的格式.从这个图上可以看出,它比 UDP 复杂得多. 首先,源端口号和目标端口号是不可少的,这一点 ...

  8. Go timer 是如何被调度的?

    hi,大家好,我是 haohongfan. 本篇文章剖析下 Go 定时器的相关内容.定时器不管是业务开发,还是基础架构开发,都是绕不过去的存在,由此可见定时器的重要程度. 我们不管用 NewTimer ...

  9. deeplearning算法优化原理

    deeplearning算法优化原理目录· 量化原理介绍 · 剪裁原理介绍 · 蒸馏原理介绍 · 轻量级模型结构搜索原理介绍 1. Quantization Aware Training量化介绍1.1 ...

  10. Java 并发基础知识

    一.什么是线程和进程? 进程: 是程序的一次执行过程,是系统运行程序的基本单元(就比如打开某个应用,就是开启了一个进程),因此进程是动态的.系统运行一个程序即是一个程序从创建.运行到消亡的过程. 在 ...