网站幻灯片效果
2016-12-27 本文已影响27人
话少为环保
仿写常见网站的的幻灯片
2016-12-27_21-55-10.gif
html部分 （含js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8 ">
<title>qq幻灯片</title>
<link rel="stylesheet" href="css/miaov.css">
<script src="js/miaov.js"></script>
<script type="text/javascript">
window.onload = 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;
for(i = 0; i < aIcoLi.length; i++)
{
aIcoLi[i].index = i;
aIcoLi[i].onclick = 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;
miaovStartMove(aPicLi[i]);
}
aIcoLi[iNow].className = 'active';
aTxtLi[iNow].getElementsByTagName('h2')[0].className = 'show';
// aPicLi[this.index].style.filter = 'alpha(opacity:100)';
// aPicLi[this.index].style.opacity = 1;
miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);
}
oBtnPrev.onclick = function () {
if(iNowUlLeft > 0 )
{
iNowUlLeft--;
fixUlLeft();
}
};
oBtnNext.onclick = function () {
if(iNowUlLeft < aIcoLi.length - 7 )
{
iNowUlLeft++;
fixUlLeft();
}
};
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.onmousemove = function ()
{
clearInterval(timer);
};
oDiv.onmouseout = function ()
{
timer = setInterval(autoPlay,3000);
};
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);
}
}
</script>
</head>
<body>
<div id="box">
<ul id="pic_list">
<li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
<a href="http://www.baidu.com"><img src="img/pic_1.jpg" alt="妙味课堂JS精品课程"></a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_2.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_3.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_4.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_5.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_6.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_7.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_8.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_9.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_10.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_11.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_12.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_13.jpg" alt="">妙味课堂JS精品课程</a>
</li>
<li>
<a href="htttp://www.baidu.com"><img src="img/pic_14.jpg" alt="">妙味课堂JS精品课程</a>
</li>
</ul>
<div class="mark"></div>
<ul id="text_list">
<li><h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a></h2></li>
<li><h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>
<li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li>
<li><h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li>
<li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a></h2></li>
<li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li>
<li><h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li>
<li><h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li>
<li><h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li>
<li><h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li>
<li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>
<li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>
<li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>
<li><h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li>
</ul>
<div id="ico_list">
<ul>
<li class="active"><a href="#"><img src="img/ico_1.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_2.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_3.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_4.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_5.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_6.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_7.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_8.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_9.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_10.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_11.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_12.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_13.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="img/ico_14.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
</ul>
</div>
<a href="#" id="btn_prev" class="btn"></a>
<a href="#" id="btn_next" class="btn showBtn"></a>
</div>
</body>
</html>
css部分
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;
filter: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);
z-index:1;
}
#text_list {
position: absolute;
bottom:60px;
left:50px;
z-index:1;
height:20px;
overflow: hidden;
}
#text_list h2 {
display: none;
}
#text_list .show {
display: block;
}
#text_list a{
color: #FFFFFF;
font-family:"Microsoft Sans Serif";
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;
/*background: red;*/
}
#btn_next{
right:20px;
background-position: right 0;
}
