完美实现八种js焦点轮播图(下篇)


Posted in Javascript onApril 20, 2020

继续上一篇的学习完美实现八种js焦点轮播图(上篇),供大家参考,具体内容如下

5.定时上下无缝滚动

思路:

1.思路1: 将ul复制一份,但滚动一半距离重新归位;(大型网站性能略低);
2.思路2: 通过相对定位,将第一个li移动到最后,再将ul和Li归位。

window.onload=function(){
 var oBox=document.getElementById('box');
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');
 var oOl=document.getElementById('ol');
 var aLi_o=oOl.getElementsByTagName('li');
 var LiHeight=aLi_u[0].offsetHeight;
 var iNow=0;//针对按钮的值
 var iNow2=0;//用于滚动
 var timer=null;
 for(var i=0;i<aLi_o.length;i++){
 aLi_o[i].index=i;
 aLi_o[i].onmouseover=function(){
  for(var i=0;i<aLi_o.length;i++){
  aLi_o[i].className='';

  this.className='active';
  //建立关系:很重要
  iNow=this.index;
  iNow2=this.index;

  startMove(oUl,{top:-this.index*LiHeight});
  }
 };

 }
 timer=setInterval(toRun,2000);
 oBox.onmouseover=function(){
 clearInterval(timer);
 };
 oBox.onmouseout=function(){
 timer=setInterval(toRun,2000);
 };
 function toRun(){
 if(iNow==0){
  //还原li并把ul归位
  aLi_u[0].style.position='static';
  oUl.style.top=0;
  //记得把iNow2还原
  iNow2=0;
 }
 if(iNow==aLi_o.length-1){
  //将第一个Li移到最后
  iNow=0;
  aLi_u[0].style.position='relative';
  aLi_u[0].style.top=aLi_u.length*LiHeight+'px';
 }else{
  iNow++;
 }
 iNow2++;
 for(var i=0;i<aLi_o.length;i++){
  aLi_o[i].className='';
 }
 aLi_o[iNow].className='active';
 startMove(oUl,{top:-iNow2*LiHeight});
 }
};

效果图:

完美实现八种js焦点轮播图(下篇)

6.左右无缝切换效果

思路:
 1.绝对定位:除第一个外的所有Li定位到右边,比较索引值与当前索引,定位要出现的li位置。
 2.加入“开关”或“时间间隔”等来控制运动切换频率!

window.onload=function(){
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');
 var oOl=document.getElementById('ol');
 var aLi_o=oOl.getElementsByTagName('li');
 var LiWidth=aLi_u[0].offsetWidth;
 var iNow=0;
 var bBtn=true;
 //除第一项外所有定位到右边
 for(var i=1;i<aLi_u.length;i++){
 aLi_u[i].style.left=LiWidth+'px';
 }

 for(var i=0;i<aLi_o.length;i++){
 aLi_o[i].index=i;

 aLi_o[i].onmouseover=function(){

  if(bBtn){
  bBtn=false;
  for(var i=0;i<aLi_o.length;i++){
   aLi_o[i].className='';
  }
  this.className='active';
  //判断左移右移
  if(iNow<this.index){
   //定位要出现的li
   aLi_u[this.index].style.left=LiWidth+'px';
   //将当前li移走
   startMove(aLi_u[iNow],{left:-LiWidth});
  }else if(iNow>this.index){
   aLi_u[this.index].style.left=-LiWidth+'px';
   startMove(aLi_u[iNow],{left:LiWidth});
  }

  startMove(aLi_u[this.index],{left:0},function(){
   bBtn=true;//只有当前运动完才可进行下一次运动
  });
  //将当前索引赋值
  iNow=this.index;

  }//开关if结束


 };

 }
};

效果图:

完美实现八种js焦点轮播图(下篇)

7.手风琴效果

 1.思路1:通过改变li宽度来制作;
 2.思路2:除第一项外的所有li按等距间隔定位,触发事件后等距变换位置 

window.onload=function(){
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');

 //除第一项外所有定位
 for(var i=1;i<aLi_u.length;i++){
 //等距30px定位
 aLi_u[i].style.left=(470-3*40)+(i-1)*30+'px';
 }
 for(var i=0;i<aLi_u.length;i++){
 aLi_u[i].index=i;
 aLi_u[i].onmouseover=function(){
  for(var i=0;i<aLi_u.length;i++){
  if(i<=this.index){
  //小于索引的全部左排列
   startMove(aLi_u[i],{left:i*30});
  }else{//大于索引的全部右排列
   startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30});
  }
  }
 }
 }
};

效果图:

完美实现八种js焦点轮播图(下篇)

8.手风琴效果2

在之前的基础上均匀定位Li!

window.onload=function(){
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');
 var num=Math.ceil(470/aLi_u.length);//每个的宽度

 //除第一项外所有定位
 for(var i=1;i<aLi_u.length;i++){
 aLi_u[i].style.left=num*i+'px';
 }
 for(var i=0;i<aLi_u.length;i++){
 aLi_u[i].index=i;
 aLi_u[i].onmouseover=function(){
  for(var i=0;i<aLi_u.length;i++){
  if(i<=this.index){
   startMove(aLi_u[i],{left:i*30});
  }else{
   startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30});
  }
  }
 };
 aLi_u[i].onmouseout=function(){
  for(var i=0;i<aLi_u.length;i++){
  startMove(aLi_u[i],{left:num*i});
  }
 };
 }
};

效果图:

完美实现八种js焦点轮播图(下篇)

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 #Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 #Javascript
JS HTML5拖拽上传图片预览
Jul 18 #Javascript
jQuery 操作input中radio的技巧
Jul 18 #Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 #Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
浅析JavaScript中的array数组类型系统
Jul 18 #Javascript
You might like
图形数字验证代码
2006/10/09 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
Javascript 实用小技巧
2010/04/07 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python的历史与优缺点整理
2020/05/26 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
党员民主评议个人总结
2014/10/20 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年高中教师工作总结
2014/12/19 职场文书