完美实现八种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的live使用注意事项
Feb 18 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
create-react-app开发常用配置教程
Jun 25 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中创建并处理图象
2006/10/09 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
初探nodeJS
2017/01/24 NodeJs
Bootstrap Table使用整理(一)
2017/06/09 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python集合能干吗
2020/07/19 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
大学应届生的自我评价
2014/03/06 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android