完美实现八种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对象和数组
May 25 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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中文件上传的一个问题
2010/09/04 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python温度转换华氏温度实现代码
2020/12/06 Python
python热力图实现简单方法
2021/01/29 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
法律专业自荐信
2014/06/03 职场文书
优秀员工评优方案
2014/06/13 职场文书
高中生旷课检讨书
2014/10/08 职场文书
思想工作总结范文
2015/08/12 职场文书
导游词之青城山景区
2019/09/27 职场文书