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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
javascript的this关键字详解
2019/05/20 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
利用Python实现原创工具的Logo与Help
2018/12/03 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python opencv实现证件照换底功能
2019/08/19 Python
python线程里哪种模块比较适合
2020/08/02 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
初中女生自我鉴定
2013/12/19 职场文书
硕士生找工作求职信
2014/07/05 职场文书
见习报告的格式
2014/11/04 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
中学教代会开幕词
2016/03/04 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL