首页 > 代码库 > js轮播（qq幻灯片效果）
js轮播（qq幻灯片效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>qq幻灯片轮播</title>
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:#000;}
.box{width:660px; height:330px; position:relative; margin:200px auto;}
.big_img{width:100%;}
.list_box{width:100%; height:90px; position:absolute; bottom:0px; left:0px;}
.tv_text{width:500px; height:30px; position:absolute; top:3px; left:60px; color:#fff; line-height:30px;}
.ul_box{width:555px; height:45px; position:absolute; top:36px; left:5px; overflow:hidden;}
.prev{width:38px; height:38px; position:absolute; top:36px; right:48px; background: url(img/btn.gif) center center no-repeat; background-position:0px 0px; }
.next{width:38px; height:38px; position:absolute; top:36px; right:5px; background: url(img/btn.gif) center center no-repeat; background-position:-38px 0px;}
.btn_active{opacity: 0.2; filter:alpha(opacity=20);}
.ul_box ul{position:absolute; top:5px;left:0px;}
ul li{width:68px; height:38px; position:relative; margin-left:10px; float:left; list-style:none;
opacity:0.4;}
.ul_box li img{width:100%; height:100%; }
.li_active{border:3px solid #fff; box-sizing:border-box; -webkit-box-sizing:border-box; opacity:1;}
.li_active::before{content:‘‘;width:10px; height:5px; background: url(img/a_hover.gif) center center no-repeat;
position:absolute; top:-8px; left:24px; display:block; background-size:100%;}
</style>
</head>
<body>
<div class="box">
<div class="img_box"><img class="big_img" src="http://www.mamicode.com/img/pic_1.jpg" ></div>
<div class="list_box">
<span class="tv_text"></span>
<div class="ul_box">
<ul>
<!-- <li><img src="http://www.mamicode.com/img/ico_1.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_2.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_3.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_4.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_5.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_6.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_7.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_8.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_9.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_10.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_11.jpg"></li>
<li><img src="http://www.mamicode.com/img/ico_12.jpg"></li> -->
</ul>
</div>
<a href="javascript:;" class="prev btn_active"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var strArr=[
‘《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...‘,
‘《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...‘,
‘《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋...‘,
‘《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女...‘,
‘《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！‘,
‘《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战‘,
‘第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官‘,
‘《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍‘,
‘《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光‘,
‘《男人帮》[全30集]悲喜双响炮，一个完美结局‘,
‘《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨‘,
‘《李献计历险记》房祖名患差时症为寻女友开启超时空冒险‘,
‘Justin bieber女友动感热单全球首发。‘
];
//初始化
var imgNum=0;
var oUl=document.querySelector(‘.ul_box ul‘);
for(var i=1; i<strArr.length; i++){
imgNum++;
var oLi=document.createElement(‘li‘);
var oImg=document.createElement(‘img‘);
oImg.src=http://www.mamicode.com/‘img/ico_‘+imgNum+‘.jpg‘;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
};
var tv_text=document.querySelector(‘.tv_text‘);
var oLi=document.querySelectorAll(‘.ul_box ul li‘);
var oliW=oLi[0].offsetWidth+10;
oUl.style.width=oliW*strArr.length+‘px‘;
oLi[0].className=‘li_active‘;
tv_text.innerHTML=strArr[0];
//--
var clickNum=0;
var big_img=document.querySelector(‘.big_img‘);
var timer=null;
clickFn();
timeGo();
var leftVal=0;
var leftNum=0;
document.querySelector(‘.next‘).onclick=function(){
derectionBtn(‘next‘,this)
}
document.querySelector(‘.prev‘).onclick=function(){
derectionBtn(‘prev‘,this)
}
document.querySelector(‘.box‘).addEventListener(‘mouseover‘,function(){
clearInterval(timer);
});
document.querySelector(‘.box‘).addEventListener(‘mouseout‘,function(){
timeGo();
});
function timeGo(){
clearInterval(timer);
timer=setInterval(function(){
if(clickNum>oLi.length-1)
{
clickNum=1;
leftNum=0;
}
else
{
clickNum++
}
if(clickNum>7){
leftNum++;
}
Move(oUl,{‘left‘:-leftNum*oliW});
activeFn(clickNum);
},1000);
}
function derectionBtn(derection,that){
switch (derection){
case ‘next‘:
leftNum++;
if(leftNum>0){document.querySelector(‘.prev‘).className=‘prev‘;}
if(leftNum>oLi.length-7){
that.classList.add(‘btn_active‘);
leftNum=oLi.length-7;
return
}else{
if(that.classList.contains(‘btn_active‘)){that.classList.remove(‘btn_active‘);}
};
Move(oUl,{‘left‘:-leftNum*oliW})
break;
case ‘prev‘:
leftNum--;
if(leftNum<oLi.length-7){document.querySelector(‘.next‘).className=‘next‘;}
if(leftNum<0){
that.className=‘prev btn_active‘;
leftNum=0;
return
}else{
if(that.classList.contains(‘btn_active‘)){that.classList.remove(‘btn_active‘);}
};
Move(oUl,{‘left‘:-leftNum*oliW})
break;
}
}
function clickFn()
{
for(var i=0; i<oLi.length; i++){
oLi[i].index=i;
oLi[i].onclick=function(){
clickNum=this.index+1;
activeFn(clickNum);
}
}
}
function activeFn(clickNum)
{
for(var i=0; i<oLi.length; i++){oLi[i].className=‘‘;};
oLi[clickNum-1].className=‘li_active‘;
big_img.src=http://www.mamicode.com/‘img/pic_‘+clickNum+‘.jpg‘;
tv_text.innerHTML=strArr[clickNum];
big_img.style.opacity=0;
Move(big_img,{‘opacity‘:‘100‘})
}
}
//----运动框架
function getStyle(obj, attr){
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
function Move(obj,json,fn){
//停止上一次定时器
clearInterval(obj.timer);
//保存每一个物体运动的定时器
obj.timer = setInterval(function(){
//判断同时运动标志
var bStop = true;
for(var attr in json){
//取当前值
var iCur = 0;
if(attr == ‘opacity‘){
iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
//计算速度
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//检测同时到达标志
if(iCur != json[attr]){
bStop = false;
}
//更改属性，获取动画效果
if(attr==‘opacity‘){
iCur += iSpeed
obj.style.filter=‘alpha(opacity:‘ + iCur + ‘)‘;
obj.style.opacity=iCur / 100;
}
else{
obj.style[attr]=iCur+iSpeed+‘px‘;
}
}
//检测停止
if(bStop){
clearInterval(obj.timer);
if(fn) fn();
}
},30)
}
//--运动框架结束
</script>
</body>
</html>
js轮播（qq幻灯片效果）