支付宝首页焦点图

最新推荐文章于 2024-09-22 11:17:00 发布

iteye_6481

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量89

点赞数

文章标签： javascript ViewUI

第一次开始写博客，前几天学了一点jquery写了一个焦点图，一直以来，所有学的东西都是自己一个人收着，但是过了一段时间之后，再往回一看，才发现自己只不过是当初懂的而已，所以从此以后我要把自己所写的效果记录下来才行，不为了给谁看，只是为了给自己多一点总结而已。

看了一下支付宝的焦点图切换的效果，其实原理就是有两个动作而已，一个是自动播放的效果，另一个就是鼠标点击小点的动作；首先是点击小点的事件，每次所点击的小点就给所在的小点添加一个高亮的类，定义page初始值为0，同时获取到点击小点的位置 index = $( ".xiaod_div span" ).index( this ); 把index的值赋给page，$( ".xiaod_div span" ).eq( page ).addClass( "a_active" ).siblings().removeClass( "a_active" ); 这个为切换小点；
再给对应位置的图片的透明度设置成为1，其他的图片的透明度就显示为0， $( ".zfb_datu_ul li" ).eq( page ).animate({ "opacity" : 1 }, num ).siblings().animate( { "opacity" : 0 }, num ); ，num切换的时间，我自己设置成为500毫秒，当切换到了最后一张的时候就把最后一张的透明度设置成0，把第一张透明度设置成1，page等于0，这样又回到原始的位置，如此的循环就可以实现效果了。然后到了自动播放事件了，把上面做好的点击事件里面的动作封装成一个run函数，使用setInterval( run, Time );来设置每各Time毫秒执行一次run函数。这样效果就实现了。

上面显示的图片都是做成了背景，背景加了这个属性background-size:cover;这个属性是css3的属性，作用就是，当window的宽高比大于图片的宽高比的时候，图片的width设为100%，height设为auto当window的宽高比小于图片的宽高比的时候，图片的height设为100%，width设为auto；

HTML代码如下：

<!DOCTYPE HTML>
<html lang="en-CN">
<head>
<meta charset="utf-8" />
<title>支付宝首页焦点图</title>
<link rel="stylesheet" href="images/index.css" />
<script src="images/js/jQuery 1.8.js"></script>
<script src="images/js/index.js"></script>
</head>
<body>
<div class="zhifub">
<div id="banner">
<div id="bg_bno"></div>
<div id="bg_bno1">
<h3><span class="h3_span">个人登录</span><span>商户登录</span></h3>
<div class="pd_div">
<p><a href="#" class="wi_bs" id="sui_a">淘宝账户登录</a>账户名： </p>
<p><input type="text" class="ip_txt" value="邮箱地址或手机号码" /></p>
<p><a href="#" class="wi_bs">忘记登录密码？</a>登录密码： </p>
<p><input type="text" class="ip_txt" /></p>
<p><input type="checkbox" style="float:left;margin:7px 7px 0 0;">安全控件登录</p>
<p style="height:35px;margin-top:10px;"><input type="button" value="" class="btn_dengl" /></p>
<p class="str_p"><strong><a href="#">免费注册</a></strong> 账户激活控件安装有问题？ </p>
</div>
</div>
</div>
<ul class="zfb_datu_ul">
<li class="datu_li1"></li>
<li class="datu_li2"></li>
<li class="datu_li3"></li>
<li class="datu_li4"></li>
</ul>
<div class="xiaod_div">
<span class="a_active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>

CSS代码：

.zhifub{height:450px;}
.zfb_datu_ul{height:400px;position:relative;}
.zfb_datu_ul li{height:400px;position:absolute;top:0;left:0;z-index:10;width:100%;}
.datu_li1{background:url(pic/1.jpg) no-repeat;background-size:cover;background-position:50% 50%;}
.datu_li2{background:url(pic/2.jpg) no-repeat;background-position:50% 50%;background-size:cover;}
.datu_li3{background:url(pic/3.jpg) no-repeat;background-position:50% 50%;background-size:cover;}
.datu_li4{background:url(pic/4.jpg) no-repeat;background-position:50% 50%;background-size:cover;}
.xiaod_div{text-align:center;margin-top:20px;}
.xiaod_div span{display:inline-block;margin-right:10px;width:12px;height:12px;background:url(ico.png) no-repeat -29px 0;cursor:pointer;}
.xiaod_div .a_active{background-position:0 0;}
#banner{width:990px;height:0;margin:0 auto;position:relative;z-index:11;}
#bg_bno{background:#000;position:absolute;z-index:12;top:30px;right:0;}
#bg_bno1{position:absolute;z-index:13;right:0;top:30px;width:284px;padding-bottom:20px;}
#bg_bno1 h3{height:50px;line-height:50px;text-align:center;color:#fff;font-size:14px;}
#bg_bno1 h3 span{display:inline-block;width:142px;background:#000;cursor:pointer;}
#bg_bno1 h3 .h3_span{background:none;}
.pd_div{padding:10px 30px;}
.pd_div p{height:27px;color:#fff;line-height:27px;}
.ip_txt{border:1px solid #999;padding:0 5px;width:220px;height:25px;line-height:25px;color:#999;}
.btn_dengl{border:none;width:225px;height:35px;background:url(btn.jpg) no-repeat 0 0;cursor:pointer;}
.btn_d1{background-position:0 -35px;}
.str_p{margin-top:10px;}
.str_p strong a{color:#FFAA00;font-size:14px;}
.wi_bs{color:#fff;float:right;}
.wi_bs:hover{text-decoration:underline;}

js代码：

/*gaotd 2012-12-14*/
$(function(){
var yunx; // 定义动画变量
var Time = 3000; // 自动播放间隔时间毫秒
var num = 1000; // 切换图片间隔的时间毫秒
var page = 0; // 定义变量
var len = $( ".zfb_datu_ul li" ).length; // 获取图片的数量
$( ".zfb_datu_ul li" ).css( "opacity", 0 ); // 设置全部的图片透明度为0
$( ".zfb_datu_ul li:first" ).css( "opacity", 1 ); // 设置默认第一张图片的透明度为1
function fun(){ // 封装
$( ".xiaod_div span" ).eq( page ).addClass( "a_active" ).siblings().removeClass( "a_active" ); // 切换小点
$( ".zfb_datu_ul li" ).eq( page ).animate({ "opacity" : 1 }, num ).siblings().animate( { "opacity" : 0 }, num ); // 切换图片
}
function run(){ // 封装
if( !$(".zfb_datu_ul li" ).is( ":animated" )){ // 判断li是否在动画
if( page == len - 1 ){ // 当图片切换到了最后一张的时候
page = 0; // 把page设置成0 又重新开始播放动画
fun();
}else{ // 继续执行下一张
page++;
fun();
}
}
}
$(".xiaod_div span").click( function(){ // 点击小点
if( !$( ".zfb_datu_ul li" ).is( ":animated" ) ){ // 判断li是否在动画
var index = $( ".xiaod_div span" ).index( this ); // 获取点击小点的位置
page = index; // 同步于page
fun();
}
});
$( ".zhifub" ).hover( function(){ // 鼠标放上去图片的时候清除动画
clearInterval( yunx );
}, function(){ // 鼠标移开图片的时候又开始执行动画
yunx = setInterval( run, Time );
}).trigger( "mouseleave" );
});

点击这里下载：http://download.csdn.net/detail/gtd03/4887657