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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
newxtree.js代码
2007/03/13 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
React组件refs的使用详解
2018/02/09 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python 字符串split的用法分享
2013/03/23 Python
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python打包成so文件过程解析
2019/09/28 Python
Python any()函数的使用方法
2019/10/28 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
聚美优品励志广告词
2014/03/14 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
校园广播稿范文
2015/08/19 职场文书