一款比较好看的javascript轮播图代码

好看的javascript轮播图效果

完整代码如下：

window.οnlοad=function ()
{var oDiv=document.getElementById('box');var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');var aTxtLi=document.getElementById('text_list').getElementsByTagName('li');var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');var oBtnPrev=document.getElementById('btn_prev');var oBtnNext=document.getElementById('btn_next');var iNowUlLeft=0;var iNow=0;var i=0;oBtnPrev.οnclick=function (){if(iNowUlLeft>0){iNowUlLeft--;fixUlLeft();}};function fixUlLeft(){oBtnPrev.className=iNowUlLeft==0?'btn':'btn showBtn';oBtnNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';miaovStartMove(oIcoUl, {left: -aIcoLi[0].offsetWidth*iNowUlLeft}, MIAOV_MOVE_TYPE.BUFFER);}oBtnNext.οnclick=function (){if(iNowUlLeft<aIcoLi.length-7){iNowUlLeft++;fixUlLeft();}};for(i=0;i<aIcoLi.length;i++){aIcoLi[i].index=i;aIcoLi[i].οnclick=function (){if(iNow==this.index){return;}iNow=this.index;tab();};}function tab(){for(i=0;i<aIcoLi.length;i++){aIcoLi[i].className='';aTxtLi[i].getElementsByTagName('h2')[0].className='';aPicLi[i].style.filter='alpha(opacity:0)';aPicLi[i].style.opacity=0;miaovStopMove(aPicLi[i]);}aIcoLi[iNow].className='active';aTxtLi[iNow].getElementsByTagName('h2')[0].className='show';miaovStartMove(aPicLi[iNow], {opacity: 100}, MIAOV_MOVE_TYPE.BUFFER);}function autoPlay(){iNow++;if(iNow>=aIcoLi.length){iNow=0;}if(iNow<iNowUlLeft){iNowUlLeft=iNow;}else if(iNow>=iNowUlLeft+7){iNowUlLeft=iNow-6;}fixUlLeft();tab();}var timer=setInterval(autoPlay, 3000);oDiv.οnmοuseοver=function (){clearInterval(timer);};oDiv.οnmοuseοut=function (){timer=setInterval(autoPlay, 3000);};
};

body,ul,h2{margin:0;padding:0; font:12px/20px Tahoma,"hiragino sans gb",Helvetica,Arial;}
img{border:none;}
li{list-style:none;}
body{background:#101010;}
#box{width:660px;height:330px;position:relative;overflow:hidden;margin:60px auto 0;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
.mark{height:90px;width:660px;background:#000;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{position:absolute;bottom:60px;left:50px;position:absolute;z-index:5;height:20px;overflow:hidden;}
#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list a{color: #FFFFFF;font-family: "Microsoft YaHei";font-size: 18px;font-weight: normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border: 2px solid #DFE8E4; height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(../img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border: 3px solid #fff; height:34px;width:62px;}
.btn{background:url(../img/btn.gif) no-repeat;height:38px;width:38px;position: absolute;bottom:11px; opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{ opacity:1;filter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}

学习资料地址：幻.zip - 蓝奏云

一款比较好看的javascript轮播图代码相关推荐

JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...
bootstrap轮播图代码详解
最近在做个人简历网站,然后要用到轮播图,上网查了一下,以下为轮播图代码: 下面展示一些内联代码片.  <div id="my ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
JavaScript轮播图（面向对象）
步骤轮播图1 HTML+CSS 轮播图2 动态生成页面通过 JavaScript程序生成 div标签中所有轮播图需要的标签生成 ul ol div 标签节点根据数组动态生成原始 ul& ...
阶段二网页搭建入门之javaScript与前端案例 javaScript轮播图
加粗样式## 效果图图片素材 html <!doctype html> <html lang="en"> <head><meta cha ...
js原生 JavaScript轮播图【渐变淡入淡出】效果实现（附代码）
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码(复 ...
JavaScript 轮播图案例
前言一名刚刚入坑前端的小白,如有错误还望指出,谢谢您的查阅提示:以下是本篇文章正文内容,下面案例可供参考轮播图案例(仅供参考) <!DOCTYPE html> <html la ...
javascript轮播图（缓冲运动）
哈喽,大家好呀!我又来咯!相信大家在翻网页的时候都会看到首页的轮播图!今天讲讲实现原理,感觉有用就收藏吧! 轮播图主要是利用缓冲运动来实现图片的切换,这样看起来比较有画面感哈! 那么什么叫做缓冲运动呢 ...
js轮播图代码_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
轮播图代码,带定时器和小圆圈(易懂)
简单的显示隐藏(带小圆圈和左右按钮,js写) <!DOCTYPE html> <html lang = "en" > <head ><me ...

一款比较好看的javascript轮播图代码

好看的javascript轮播图效果

一款比较好看的javascript轮播图代码相关推荐

最新文章

热门文章