完美实现八种js焦点轮播图（上篇）

本文分为上下篇为大家分享了js焦点轮播图八种经典效果，供大家参考，具体内容如下

基本布局：

 

 

 

 

 

 

 
 

 
1
 
2
 
3
 
4
 
5
 
 

1.普通焦点图

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');
 for(var i=0;i

效果图：图略
2.淡入淡出效果

var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');

for(var i=0;i

效果图：

3.向上滚动效果：

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;

for(var i=0;i

效果图：

4.定时上下滚动：

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 timer=null;//定时器

 for(var i=0;i

效果图：

更多关于轮播图效果的专题，请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网，大家继续关注更多精彩焦点轮播图。