完美实现八种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 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
jquery css实现流程进度条
Mar 26 jQuery
完美实现八种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
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
PHP中的self关键字详解
2019/06/23 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
python实现线程池的方法
2015/06/30 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python数据分析:关键字提取方式
2020/02/24 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
集体婚礼证婚词
2014/01/13 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
银行服务感言
2014/03/01 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
服务整改报告
2014/11/06 职场文书
卡特教练观后感
2015/06/08 职场文书
金榜题名主持词
2015/07/02 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
《确定位置》教学反思
2016/02/18 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Python实现学生管理系统(面向对象版)
2021/06/24 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
css3 选择器
2022/05/11 HTML / CSS