js实现幻灯片轮播图


Posted in Javascript onAugust 14, 2020

本文实例为大家分享了js实现幻灯片轮播图的具体代码,供大家参考,具体内容如下

1.html

选取了五张图片 放入div中,然后是左右箭头,以及按钮,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <link href="../css/轮播图.css" rel="stylesheet">
</head>
<body>
<div id="box">
 <img src="../image/car-1.jpg">
 <img src="../image/car-2.jpg">
 <img src="../image/car-3.jpg">
 <img src="../image/car-4.jpg">
 <img src="../image/car-5.jpg">
 <div class="arrow">
 <a class="left" href="javacript:void(0);" ><</a>
 <a class="right" href="javacript:void(0);" >></a>
 </div>
 <ul class="btn">
 <li class="on" slideIndex="1">1</li>
 <li slideIndex="2">2</li>
 <li slideIndex="3">3</li>
 <li slideIndex="4">4</li>
 <li slideIndex="5">5</li>
 </ul>
</div>
<script src="../js/轮播图.js">
 </script>
</body>
</html>

2.css给div设置居中

将所有图片隐藏,设置箭头和小圆点的样式
代码如下

*{
 margin:0;
 padding:0;
 text-decoration: none;
 list-style: none;
}
#box{
 width:800px;
 height: 500px;
 margin:50px auto 0px;
 position: relative;
}
#box img{
 width:800px;
 height: 500px;
 display: none;
 animation:fade 3s;
}
#box .arrow{
 width:800px;
 height: 80px;
 position: absolute;
 top:50%;
 margin-top: -40px;
}
#box .arrow .left,.right{
 display: inline-block;
 line-height: 80px;
 width: 50px;
 height:80px;

}
#box .arrow .left:hover{
 background:rgba(0,0,0,0.8);
}
#box .arrow .right:hover{
 background:rgba(0,0,0,0.8);
}
#box .arrow .right{
 text-align: right;
 position: absolute;
 right:0;
}
#box .arrow a{
 font-size: 50px;
 color: #ffffff;
}
#box .btn{
 position: absolute;
 bottom: 10px;
 left:50%;
 margin-left: -98.47px;
 text-align: center;
}
#box .btn li{
 text-align: center;
 margin:0 5px;
 padding: 10px;
 float:left;
 background:white;
 border-radius:20%;
 cursor: pointer;

 transition: background 2s ease;
}
#box .btn .on{
 background: #000;
 color:white;
}
@keyframes fade{
 from{
 opacity:.4;
 }
 to{
 opacity:1;
 }
}

3.js部分

js设定让当前图片显示display:block,其他图片隐藏display:none;

js代码如下

window.onload=function () {
 var left=document.getElementsByClassName("left")[0];
 var right=document.getElementsByClassName("right")[0];
 var btn=document.getElementsByClassName("btn")[0].getElementsByTagName("li");
 var box=document.getElementById("box");
 var slideIndex=1;
 var index=1;
 var timer;
 //图片切换函数
 showSlides(slideIndex);
 function showSlides(n) {
 var slides=document.getElementById("box").getElementsByTagName("img");
 for(var i=0;i<slides.length;i++){
  slides[i].style.display="none";
  btn[i].className="";
 }
 slides[slideIndex-1].style.display="block";
  btn[slideIndex-1].className="on"
 }
 //箭头切换
 left.onclick=function () {
 if(slideIndex>1) {
  slideIndex--;
  showSlides(slideIndex);
 }else {
  slideIndex=5;
  showSlides(slideIndex);
 }
 }
  right.onclick=function () {
  if(slideIndex<5) {
   slideIndex++;
   showSlides(slideIndex);
  }else {
   slideIndex=1;
   showSlides(slideIndex);
  }
  }
  //btn切换
 for(var i=0;i<btn.length;i++){
 btn[i].onclick=function () {
  var myslideIndex=this.getAttribute('slideIndex');
  // var myindex=parseInt(this.getAttribute("index"));
  slideIndex=myslideIndex;
  showSlides(slideIndex);
 }
 }
 //自动播放
 function play() {
 timer=setInterval(function () {
  right.onclick();
 },4000);
 }
 function stop() {
 clearInterval(timer);
 }
box.onmouseout=play;
 box.onmouseover=stop;
 play();
}

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
koa-router源码学习小结
Sep 07 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 #Javascript
修改Vue打包后的默认文件名操作
Aug 12 #Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 #Javascript
vue设置默认首页的操作
Aug 12 #Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 #Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 #Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 #Javascript
You might like
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
制作特殊字的脚本
2006/06/26 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python中实现switch功能实例解析
2018/01/11 Python
python实现随机漫步方法和原理
2019/06/10 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python识别验证码图片实例详解
2020/02/17 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
座谈会主持词
2014/03/20 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL