完美实现八种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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
javascript静态的url如何传递
May 03 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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
PHP中的integer类型使用分析
2010/07/27 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP类型约束用法示例
2016/09/28 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python用GET方法上传文件
2015/03/10 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
详解python开发环境搭建
2016/12/16 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
python简单区块链模拟详解
2019/07/03 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
校友会欢迎辞
2014/01/13 职场文书
商场端午节活动方案
2014/01/29 职场文书
大学秋游活动方案
2014/02/11 职场文书
四查四看剖析材料
2014/02/14 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL