以下是 汽车之家2015新版焦点图代码轮播滚动切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>汽车之家2015新版焦点图代码</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/zzsc.js"></script>
<script>
window.onload = function()
{
var oBox = document.getElementById('box');
var oPrev = getByClass(oBox,'prev')[0];
var oNext = getByClass(oBox,'next')[0];
var oBigUl = getByClass(oBox,'bigUl')[0];
var aLiBig = oBigUl.getElementsByTagName('li');
var oNumUl = getByClass(oBox,'numberUl')[0];
var aLiNumber = oNumUl.getElementsByTagName('li');
var oTextUl = getByClass(oBox,'textUl')[0];
var aLiText = oTextUl.getElementsByTagName('li');
var nowZindex = 1;
var now = 0;
function tab()
{
for(var i=0; i<aLiNumber.length; i++)
{
aLiNumber[i].className = '';
}
aLiNumber[now].className = 'night';
aLiBig[now].style.zIndex = nowZindex++;
aLiBig[now].style.opacity = 0;
startMove(aLiBig[now],'opacity',100);
for(var i=0; i<aLiText.length; i++)
{
aLiText[i].style.display = 'none';
}
aLiText[now].style.display = 'block'
}
for(var i=0; i<aLiNumber.length; i++)
{
aLiNumber[i].index = i;
aLiNumber[i].onclick = function()
{
if(this.index==now)return;
now = this.index;
tab();
}
}
oNext.onmouseover = oPrev.onmouseover = oBigUl.onmouseover = function()
{
startMove(oPrev,'opacity',100);
startMove(oNext,'opacity',100)
}
oNext.onmouseout = oPrev.onmouseout = oBigUl.onmouseout = function()
{
startMove(oPrev,'opacity',0);
startMove(oNext,'opacity',0)
}
oPrev.onclick = function()
{
now--
if(now==-1)
{
now=aLiNumber.length-1;
}
tab();
}
oNext.onclick = function()
{
now++
if(now==aLiNumber.length)
{
now=0;
}
tab();
}
var timer = setInterval(oNext.onclick,3000)
oBox.onmouseover = function()
{
clearInterval(timer)
}
oBox.onmouseout = function()
{
timer = setInterval(oNext.onclick,3000)//改变速度修改3000 ，例如3000=3秒钟
}
}
</script>
<base target="_blank" />
</head>
<body>
<!-- 代码 开始 -->
<div id="box">
<div class="prev"></div>
<div class="next"></div>
<ul class="bigUl">
<li style="z-index:1"><a href="#"><img src="images/1.jpg" alt="图1" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="图2" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="图3" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="图4" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="图5" /></a></li>
<li><a href="#"><img src="images/6.jpg" alt="图6" /></a></li>
<li><a href="#"><img src="images/7.jpg" alt="图7" /></a></li>
</ul>
<ul class="numberUl">
<li class="night"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
<li><a href="javascript:;">7</a></li>
</ul>
<div>
<ul class="textUl">
<li style="display:block;"><a href="#">定位精品路线 原创试驾奇瑞艾瑞泽3</a></li>
<li><a href="#">锂电池是亮点 米儿低速电动车设计解读</a></li>
<li><a href="#">舒适及操控更上一层楼 测试长安金欧诺</a></li>
<li><a href="#">外观动感/配置丰富 天籁2.0L用车记</a></li>
<li><a href="#">走到哪都信心十足 普拉多用车心得</a></li>
<li><a href="#">全新东风标致508 驾乘尽享的中高级杰座</a></li>
<li><a href="#">C4L 动力快人一步礼遇更胜一筹</a></li>
</ul>
</div>
</div>
</body>
</html>JS代码(zzsc.js):
// JavaScript Documentfunction getByClass(oParent,name){
var aClass = oParent.getElementsByTagName('*');
var arlt = [];
for(var i=0;
i<aClass.length;
i++){
if(aClass[i].className==name){
arlt.push(aClass[i]);
}
}
return arlt;
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name]}
else{
return getComputedStyle(obj,false)[name]}
}
function startMove(obj,styleName,iTarget){
clearInterval(obj.timer)obj.timer = setInterval(function(){
var now = 0;
if(styleName=='opacity'){
now = Math.round((parseFloat(getStyle(obj,styleName))*100));
}
else{
now = parseInt(getStyle(obj,styleName));
}
var speed = (iTarget-now)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(now == iTarget){
clearInterval(obj.timer)}
else{
if(styleName=='opacity'){
obj.style.opacity = (now+speed)/100;
obj.style.filter = 'alpha(opacity='+(now+speed)+')'}
else{
obj.style[styleName] = now+speed+'px';
}
}
}
,30)}
CSS代码(zzsc.css):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{background:#fff;color:#555;font-size:14px;font-family:Verdana,Arial,Helvetica,sans-serif;}
td,th,caption{font-size:14px;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
a{color:#555;text-decoration:none;}
a:hover{text-decoration:underline;}
img{border:none;}
ol,ul,li{list-style:none;}
input,textarea,select,button{font:14px Verdana,Helvetica,Arial,sans-serif;}
table{border-collapse:collapse;}
html{overflow-y:scroll;}
/* css common */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
#box{position:relative;width:368px;height:221px;border:1px solid #f2f2f2;margin:100px auto;}
#box .bigUl{}
#box .prev{position:absolute;width:40px;height:60px;background:url(../images/icon-focusimg-btn-png24-20131225.png) -44px -63px no-repeat;z-index:500;top:67px;left:0px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
#box .next{position:absolute;width:40px;height:60px;background:url(../images/icon-focusimg-btn-png24-20131225.png) -74px -63px no-repeat;z-index:500;top:67px;right:0px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
.bigUl li{position:absolute;}
.numberUl{position:absolute;right:0;bottom:37px;z-index:400}
.numberUl li{width:24px;height:13px;float:left;background:#3b5998;opacity:0.7;margin-left:1px;}
.numberUl li a{display:block;width:24px;height:13px;color:#fff;font-size:12px;text-align:center;line-height:13px;}
#box .textUl li{position:absolute;left:20px;bottom:10px;display:none;}
#box .textUl li a{font-size:18px;font-family:"Microsoft Yahei";color:#000;font-weight:bold;}
.numberUl li.night a{background:yellow;color:black;}
分享到QQ
分享到微博
微信扫一扫
