JavaScript实现旋转轮播图


Posted in Javascript onAugust 18, 2020

最近一直在学习JavaScript,然后看到旋转轮播图的案例,就尝试着用js做了一个简单的轮播图,因为无法显示动态效果,所以就放个截图:

JavaScript实现旋转轮播图

这个效果是这样的:一共有7张图片,它们会自动地向左滑动,然后左右箭头也可以控制轮播图的左滑和右滑,同时,如果鼠标停在图片上,那么轮播图会停止自动滑动,当鼠标移开时,将会继续向左轮播。
首先,我这里封装了两个函数(因为暂且还没有学jQuery,所以用了封装函数的方法来实现),第一个函数是$函数,调用可以获取html中的元素,代码如下:

`function $(select){
 if (typeof select != 'string') {
  console.log('传入的参数有误');  
  return null;
 }
 var firstChar = select.charAt(0);
 switch(firstChar){
  case '#':
  return document.getElementById(select.substr(1));
  break;
  case '.':
  if (document.getElementsByClassName){
   return document.getElementsByClassName(select.substr(1));
  } else {
   var result = [];
   var allElemnts = document.getElementsByTagName('*');
   console.log(allElemnts);
   for (var i = 0; i < allElemnts.length; i++){
   var e = allElemnts[i];
   var className = e.className;
   var classArr = className.split(' ');
   for (var j = 0; j < classArr.length; j++){
    var c = classArr[j];
    if (c == select.substr(1)) {
    result.push(e);
    break;
    }
   }
   }
   return result;
  }
  break;
  default :
  return document.getElementsByTagName(select);
 }
 }`

第二个函数是一个动画函数,用json实现多条样式的动态改变,从而达到一个动画效果,代码如下: `

function animate(element, json, fun) {
 clearInterval(element.timer);
 function getStyle(element, styleName){
 if(element.currentStyle){
  //ie浏览器下 直接通过currentstyle来获取
  //return element.currentStyle.heigh;
  return element.currentStyle[styleName];
 }else{
  var computedStyle = window.getComputedStyle(element,null);
  return computedStyle[styleName];
 }
 }
 var isStop = false;
 element.timer = setInterval(function () {
 isStop = true;
 for (var key in json){
  var target = json[key];
  var current;
  if (key == 'opacity') {
  //当动画的类型为透明度时 获取的值应该是浮点类型
  current = parseFloat(getStyle(element, key)) || 1;
  } else {
  //其他情况 用整数类型
  current = parseInt(getStyle(element, key)) || 0;
  }  
  var step = (target - current) / 10;
  if (key != 'opacity') {
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  }
  current += step;
  if (key == 'opacity') {
  if (Math.abs(target - current) > 0.01) {
   isStop = false;
  } else {
   current = target;
  }
  element.style.opacity = current + '';
  } else {
  if (Math.abs(target-current) > Math.abs(step)) {
   isStop = false;
  } else {
   current = target;
  }
  if (key == 'zIndex'){
   element.style.zIndex = Math.round(current);
  } else {
   element.style[key] = current + 'px';
  }  
  }  
 }
 if (isStop) {
  clearInterval(element.timer);
  console.log('动画完成');
  if (typeof fun == 'function') {
  fun();
  }
 }
 }, 30);
}`

接下来就要写html的部分了,因为只有几张图片,所以html的部分很简单:

<body>
 <div class="box">
 <div class="content">
  <ul>
  <li><a href="#"><img src="./images/1.jpg"></a></li>
  <li><a href="#"><img src="./images/2.jpg"></a></li>
  <li><a href="#"><img src="./images/3.jpg"></a></li>
  <li><a href="#"><img src="./images/4.jpg" class="current"></a></li>
  <li><a href="#"><img src="./images/5.jpg"></a></li>
  <li><a href="#"><img src="./images/6.jpg"></a></li>
  <li><a href="#"><img src="./images/7.jpg"></a></li>
  </ul>
 </div>
 <div class="control">
  <a href="javascript:;" id="prev"></a>
  <a href="javascript:;" id="next"></a>
 </div>
 </div>
</body>

css样式的部分也不多做叙述。

下面就是JS是部分啦,代码也很简单,理清楚就好

window.onload = function(){
 //定位,并给图片设置大小透明度
 var json = [{
 width: 630,
 top: 23,
 left: 0,
 zIndex: 2,
 opacity: 0
 },{
 width: 630,
 top: 23,
 left: 0,
 zIndex: 3,
 opacity: 0
 },{
 width: 630,
 top: 23,
 left: 0,
 zIndex: 4,
 opacity: 0.6
 },{
 width: 730,
 top: 0,
 left: 125,
 zIndex: 5,
 opacity: 1
 },{
 width: 630,
 top: 23,
 left: 350,
 zIndex: 4,
 opacity: 0.6
 },{
 width: 630,
 top: 23,
 left: 350,
 zIndex: 3,
 opacity: 0
 },{
 width: 630,
 top: 23,
 left: 350,
 zIndex: 2,
 opacity: 0
 }];
function refreshImageLocatin(index){
 //默认情况下 第i张图对应第i个位置
 //index=1时 第i个图对应i-1个位置
 //也就是第i个图对应i-index的位置
 var liArr = $('li');
 for(var i = 0; i < liArr.length; i++){
  var li = liArr[i];
  var locationIndex = i - index;
  console.log('i='+i);
  console.log('index='+index);
  console.log('locationIndex='+locationIndex);
  if(locationIndex < 0){
  locationIndex += 7;
  }
  var locationData = json[locationIndex];
  animate(li, locationData, null);
 }
 }

 refreshImageLocatin(0);

 var index = 0;
 $('#next').onclick = function(){
 index++;
 if(index == 7){
  index = 0;
 }
 refreshImageLocatin(index);
 }
 $('#prev').onclick = function(){
 index--;
 if(index < 0){
  index = 6;
 }
 refreshImageLocatin(index);
 }

 var nextImage = $('#next').onclick;
 var contentBox = $('.content')[0];
 //自动播放
 var timer = setInterval(nextImage, 3000);
 //当鼠标移动到图片上,停止播放
 contentBox.onmouseover = function(){
 clearInterval(timer);
 }
 contentBox.onmouseout = function(){
 timer = setInterval(nextImage ,3000)
 }
}

以上就是旋转轮播图的全部内容了,给自己的学习过程做个简单的记录,也顺便巩固一下。

Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 #Javascript
ECMAscript 变量作用域总结概括
Aug 18 #Javascript
微信小程序之前台循环数据绑定
Aug 18 #Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 #Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 #Javascript
详谈innerHTML innerText的使用和区别
Aug 18 #Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 #Javascript
You might like
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
JQuery 常用操作代码
2010/03/14 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
ionic3 懒加载
2017/08/16 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python装饰器用法实例总结
2018/02/07 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python和php哪个更适合写爬虫
2020/06/22 Python
python中os.remove()用法及注意事项
2021/01/31 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
领导欢迎词范文
2015/01/26 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Redis 异步机制
2022/05/15 Redis
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技