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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 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
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
定义php常量的详解
2013/06/09 PHP
PHP中使用curl入门教程
2015/07/02 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
python requests库的使用
2021/01/06 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
.NET概念性的面试题
2012/02/29 面试题
销售人才自我评价范文
2014/09/27 职场文书
个人买房协议书范本
2014/10/06 职场文书
2015年新学期寄语
2015/02/26 职场文书
实践论读书笔记
2015/06/29 职场文书
期中考试后的感想
2015/08/07 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android