標籤：clear idt 架構 off nts jpg slist alpha ebe
<!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="img/pic_1.jpg" ></div>
<div class="list_box">
<span class="tv_text"></span>
<div class="ul_box">
<ul>
<!-- <li><img src="img/ico_1.jpg"></li>
<li><img src="img/ico_2.jpg"></li>
<li><img src="img/ico_3.jpg"></li>
<li><img src="img/ico_4.jpg"></li>
<li><img src="img/ico_5.jpg"></li>
<li><img src="img/ico_6.jpg"></li>
<li><img src="img/ico_7.jpg"></li>
<li><img src="img/ico_8.jpg"></li>
<li><img src="img/ico_9.jpg"></li>
<li><img src="img/ico_10.jpg"></li>
<li><img src="img/ico_11.jpg"></li>
<li><img src="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=‘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=‘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投影片效果）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
