腾讯《活着》频道JS图片替换效果解析
日期：2014-05-16 浏览次数：20447 次
腾讯《活着》频道JS图片轮换效果解析
腾讯《活着》频道JS图片轮换效果解析
1.原理分析
总析:
包含内容的层->宽:900 高:400
主要显示层-> 宽800 高400 即最上面那层 z-index=100
中间层->宽- 800*5/6 高400*5/6 z-index=10
最下面的层->宽 800*2/3 高 400*2/3 z-index=1
通过不同宽/高/z-index 来达到层次感 然后通过定时器是层移动 但样式不同 即左中2移动到最上面 左中2的样式变为最上面的样式 原来最上面的样式变为右2 依次类推
1.层z-index属性的运用 上面->下面层z-index依次是:100-10-1
2.margin-top 的运用 最上面与中间,中间与下面的递减 主要是通过这个属性实现的
3.定时器的运用
2.文档构建
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>《活着》汇总页_图片频道_新闻中心_腾讯网</title>
<style type="text/css">
.wrapper_zt {
background: url("http://img1.gtimg.com/news/pics/hv1/244/23/1028/66851809.png") repeat-x scroll 0 0 transparent;
font-family: Microsoft YaHei,SimHei,STHeiti;
width: 100%;
}
.main {
clear: both;
margin: 0 auto;
overflow: hidden;
width: 960px;
}
.slider {
height: 400px;
padding: 30px 0;
width: 960px;
}
.scrollBox {
height: 400px;
margin: 0 auto;
position: relative;
width: 900px;
}
.scrollPic {
height: 400px;
margin: 0 auto;
width: 800px;
}
.scrollPic .item {
background: url("http://mat1.gtimg.com/news/2011baronxiong/inc/sm_loader.gif") no-repeat scroll center center #000000;
position: absolute;
z-index: 10;
}
.scrollPic .item img {
border: 1px solid #666666;
opacity: 0.8;
}
.scrollPic .current img {
height: 400px;
opacity: 1;
width: 800px;
}
.scrollPic .iText {
display: none;
}
.scrollPic .current .iText {
background: url("http://img1.gtimg.com/news/pics/hv1/233/9/1032/67108328.png") no-repeat scroll 0 0 transparent;
display: block;
height: 100px;
left: -5px;
position: absolute;
top: -5px;
width: 100px;
}
.prevCur {
cursor: pointer;
display: block;
height: 27px;
left: -30px;
position: absolute;
top: 185px;
width: 22px;
}
.nextCur {
cursor: pointer;
display: block;
height: 27px;
position: absolute;
right: -30px;
top: 185px;
width: 22px;
}
.scrollDot {
bottom: 0;
left: 100px;
position: absolute;
}
.scrollDot span {
background: url("images/ico11.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
margin: 0 5px;
padding: 6px;
}
.scrollDot span.on {
background: url("images/ico112.png") no-repeat scroll 0 0 transparent;
}
.prevCur {
background: url("http://img1.gtimg.com/news/pics/hv1/252/14/1031/67044597.png") no-repeat scroll 0 0 transparent;
}
.nextCur {
background: url("http://img1.gtimg.com/news/pics/hv1/114/21/1031/67046244.png") no-repeat scroll 0 0 transparent;
}
</style>
</head>
<body>
<div class="wrapper_zt">
<div class="main">
<div class="slider">
<div id="scrollBox" class="scrollBox">
<div id="scrollPic" class="scrollPic">
<!-- 初始化插入的数据 -->
<!--<div class="item" style="left: 208px; width: 666px; height: 333px; margin-top: 33px;
z-index: 10;">
<a href="http://news.qq.com/zt2012/living/12mother.htm" target="_blank">
<img src="http://mat1.gtimg.com/news/huozhe/collection/12suimama.jpg" style="width: 666px;
height: 333px;"></a><div class="iText">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
