js+html+css实现手动轮播和自动轮播


Posted in Javascript onDecember 30, 2020

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下

原理:设置图片层的总长=单张图片长度*张数;在轮播层中利用overflow只留出一张图片的显示; 通过图片层的left来显示轮播的每一张图,第一张为0,为了后面的图片显示,left的值左移为负数。

原理图

js+html+css实现手动轮播和自动轮播

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<!-- <script type="text/javascript" src="demo.js"></script> -->
</head>
<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 ul{
 list-style: none;
 }
 a{
    text-decoration: none;
  }
 #container{
 position: relative;
 width: 500px;
 height: 260px;
 margin: 20px auto;
 overflow: hidden; /*溢出隐藏:只显示一张图片*/
 }
 #container .parent{
 position: absolute;
 width: 2500px; /*整个图片层长度:500*5=2500*/
 height: 260px;
 }
 
 #container .parent li{
 float: left;
 width: 500px;
 height: 100%;
 }
 #container .parent li img{
 width: 100%;
 height: 100%;
 }
 #container .btnLeft,
 #container .btnRight{
 width: 30px;
   height: 30px;
   background-color: #9E9E9E;
   border-radius: 20%;
   opacity: 80%;
   position: absolute; /*包含块为图片显示层container*/
   top: 0;
   bottom: 0;
   margin: auto;
   font-size: 20px;
   color: #f40;
   text-align: center;
   line-height: 30px;
 }
 #container .btnLeft{
   left: 10px;
 }
 #container .btnRight{
 right: 10px;
 }
 #container .btnLeft:hover,
 #container .btnRight:hover{
 opacity: 90%;
 cursor: pointer;
 }
 /*蒙层*/
 #container .modal{
 width: 100%;
 height: 40px;
 background: rgba(0,0,0,.3);
 position: absolute;
 left: 0;
 bottom: 0;
 line-height: 40px;
 padding: 0 40px;
 box-sizing: border-box;
 }
 #container .modal .title{
 float: left;
 color: #fff;
 font-size: 12px;
 }
 #container .modal .dots{
 float: right;
 position: absolute;
 bottom: 10px;
 left: 340px;
 }
 #container .modal .dots li{
 width: 15px;
 height: 15px;
 border-radius: 50%;
 float: left;
 /*可以使用行块盒*/
 /*display: inline-block;*/
 margin: 0 5px;
 cursor: pointer;
 }
 .clearfix::after{
 content: "";
 display: block;
 clear: both;
 }
 .on{
 background-color: red;
 }
 .off{
 background-color: gray;
 }
</style>
<body>
<div id="container">
 <ul class="parent" style="left: 0;">
 <li><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>

 <div class="btnLeft"><</div>
 <div class="btnRight">></div>
 <div class="modal">
 <div class="title">
  <h2>轮播图</h2>
 </div>
 <div class="dots">
  <ul class="clearfix">
  <li class="on"></li>
  <li class="off"></li>
  <li class="off"></li>
  <li class="off"></li>
  <li class="off"></li>
  </ul>
 </div>
 </div>
</div>
<script type="text/javascript">
 
var imgShow = document.getElementsByClassName('parent')[0],
 dotList = document.querySelectorAll('.dots >.clearfix > li');
var btnLeft = document.getElementsByClassName('btnLeft')[0],
  btnRight = document.getElementsByClassName('btnRight')[0];
var dotLen = dotList.length,
 index = 0; //轮播层的图片索引,0表示第一张

//圆点显示
function showRadius() {
 for(var i = 0; i < dotLen; i++) {
 if(dotList[i].className === "on"){
  dotList[i].className = "off";
 }
 }
 dotList[index].className = "on";
}

//向左移动
btnLeft.onclick = function() {
 index--;
  if(index < 0){ /*第1张向左时,变为第5张*/
    index = 4;
  }
  showRadius();
 var left;
 var imgLeft = imgShow.style.left;
 if(imgLeft === "0px") { /*当是第1张时,每张图片左移,移4张图,位置为-(4*500)*/
 left = -2000;
 }
 else{
 left = parseInt(imgLeft) + 500; /*由于left为负数,每左移一张加500*/
 }
 imgShow.style.left = left + "px";
}

//向右移动
btnRight.onclick = function() {
 index++;
  if(index > 4){ /*第5张向右时,变为第1张*/
    index = 0;
  }
  showRadius();
 var right;
 var imgLeft = imgShow.style.left;
 if(imgLeft === "-2000px") { /*当是第5张时,第1张的位置为0*/
 right = 0;
 }
 else{
 right = parseInt(imgLeft) - 500; /*由于left为负数,每右移一张减500*/
 }
 imgShow.style.left = right + "px";
}

// 自动轮播
/*var timer;
function autoPlay() {
 timer = setInterval(function() {
 var right;
 var imgLeft = imgShow.style.left;
 if(imgLeft === "-2000px") {
  right = 0;
 }
 else{
  right = parseInt(imgLeft) - 500;
 }
 imgShow.style.left = right + "px";
 } ,1000)
}
autoPlay();*/

for(var i = 0; i < dotLen; i++) {
  /*利用闭包传递索引*/
  (function(i) {
    dotList[i].onclick = function() {
     var dis = index - i; //当前位置和点击的距离
     imgShow.style.left = (parseInt(imgShow.style.left) + dis * 500) + "px";
     index = i; //显示当前位置的圆点
     showRadius();
   }
  })(i);
}

</script>

</body>
</html>

效果:按钮左右滑动图片,图片上的小圆点也可以选择图片。

js+html+css实现手动轮播和自动轮播

js+html+css实现手动轮播和自动轮播

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

Javascript 相关文章推荐
Jquery 表单验证类介绍与实例
Jun 09 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
浅谈React高阶组件
Mar 28 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
js实现鼠标拖曳效果
Dec 30 #Javascript
微信小程序实现简单购物车功能
Dec 30 #Javascript
微信小程序实现购物车小功能
Dec 30 #Javascript
Vue实现简易购物车页面
Dec 30 #Vue.js
You might like
提取HTML标签
2006/10/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python中实现输入一个整数的案例
2020/05/03 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
C#笔试题和英文面试题
2013/02/07 面试题
造价工程师个人求职信
2013/09/21 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
质量承诺书格式范文
2015/04/28 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Python利用folium实现地图可视化
2021/05/23 Python