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插件之打造自定义的select标签
Nov 30 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
JS的事件绑定深入认识
2014/06/26 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python中协程用法代码详解
2018/02/10 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python input函数使用实例解析
2019/11/22 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
参观监狱心得体会
2014/01/02 职场文书
生产厂长岗位职责
2014/02/21 职场文书
《颐和园》教学反思
2014/02/26 职场文书
人力资源求职信
2014/05/25 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书