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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
js转换对象为xml
Feb 17 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
结合axios对项目中的api请求进行封装操作
Sep 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
js 颜色选择插件
2017/01/23 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python字符串循环左移
2019/03/08 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
颁奖晚会主持词
2014/03/25 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python