完美实现八种js焦点轮播图(上篇)

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

基本布局:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 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 
 

效果图:

完美实现八种js焦点轮播图(上篇)_第1张图片

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 
 

效果图:

完美实现八种js焦点轮播图(上篇)_第2张图片

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 
 

效果图:

完美实现八种js焦点轮播图(上篇)_第3张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家,大家继续关注更多精彩焦点轮播图。

你可能感兴趣的:(完美实现八种js焦点轮播图(上篇))