完美实现八种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 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
JavaScript判断数组类型的方法
Oct 23 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
javascript中Object使用详解
2015/01/26 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
Django实现文件上传下载
2019/10/06 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python必须了解的35个关键词
2020/07/16 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
廉洁校园实施方案
2014/05/25 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
趵突泉导游词
2015/02/03 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS