继续上一篇的学习完美实现八种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});
}
};
效果图:
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结束
};
}
};
效果图:
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});
}
}
}
}
};
效果图:
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});
}
};
}
};
效果图:
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍完美实现八种js焦点轮播图(上篇),包括了完美实现八种js焦点轮播图(上篇)的使用技巧和注意事项,需要的朋友参考一下 本文分为上下篇为大家分享了js焦点轮播图八种经典效果,供大家参考,具体内容如下 基本布局: 1.普通焦点图 效果图:图略 2.淡入淡出效果 效果图: 3.向上滚动效果: 效果图: 4.定时上下滚动: 效果图: 更多关于轮播图效果的专题,请点击下方链接查看学习 java
本文向大家介绍原生js实现焦点轮播图效果,包括了原生js实现焦点轮播图效果的使用技巧和注意事项,需要的朋友参考一下 原生js焦点轮播图主要注意这几点: 1、前后按钮实现切换,同时注意辅助图 2、中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index 3、间隔调用与无限轮播。 4、注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行 5、另外在切换图片的时候,
本文向大家介绍jquery实现焦点轮播效果,包括了jquery实现焦点轮播效果的使用技巧和注意事项,需要的朋友参考一下 HTML代码 css代码 JavaScript代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍基于jquery实现轮播焦点图插件,包括了基于jquery实现轮播焦点图插件的使用技巧和注意事项,需要的朋友参考一下 直接上代码,可能不是最好的,欢迎吐槽。 Html CSS Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。 Run 起来: $(".slider').slider({auto: true, interval: 2000}); 改进j
本文向大家介绍jQuery焦点图轮播效果实现方法,包括了jQuery焦点图轮播效果实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery焦点图轮播效果实现方法。分享给大家供大家参考,具体如下: 前面一篇《JS实现焦点图轮播效果的方法详解》详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧。 核心代码如下: 和js的区别:用.animate()方法
本文向大家介绍基于JQuery实现图片轮播效果(焦点图),包括了基于JQuery实现图片轮播效果(焦点图)的使用技巧和注意事项,需要的朋友参考一下 自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).res