jquery写的banner焦点图滚动切换效果
最近有点闲,用jquery写了个banner滚动切换效果,为了提高扩展性,函数里增加了三个参数,支持class,方向(up,down,left,right)和每张图显示的时间.虽然说授人与鱼,不如授人与渔,只是自我感觉并没有太多的技巧,只是分析效果的每一个事件,然后给每一个事件加动作,在逻辑上肯定有自己没想到的,也肯定有更好的写法,欢迎一起探讨交流.
效果图:
html代码:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”author” content=”stealer” />
<link rel=”stylesheet” href=”css/common.css”>
<link rel=”stylesheet” href=”css/scroll.css”>
<title>banner滚动切换</title>
</head>
<body>
<div class=”banner”>
<ul class=”scroll”>
<li><a href=”#”><img src=”images/120323_exchange_538x200.jpg” /></a></li>
<li><a href=”#”><img src=”images/121017_qh_538x200.jpg” /></a></li>
<li><a href=”#”><img src=”images/121019_d1_538x200.jpg” /></a></li>
</ul>
</div>
<div class=”banner”>
<ul class=”scroll”>
<li><a href=”#”><img src=”images/120323_exchange_538x200.jpg” /></a></li>
<li><a href=”#”><img src=”images/121017_qh_538x200.jpg” /></a></li>
<li><a href=”#”><img src=”images/121019_d1_538x200.jpg” /></a></li>
<li><a href=”#”><img src=”images/121017_qh_538x200.jpg” /></a></li>
<li><a href=”#”><img src=”images/121019_d1_538x200.jpg” /></a></li>
</ul>
</div>
</body>
<script src=”js/jquery-1.4.3.min.js”></script>
<script src=”js/stealer.js”></script>
</html>
细心的话会发现这个效果不单单支持图片切换,因为换的是li,内容可以自己写.
css代码:
/* @Author stealer */
.banner{
width:538px;
height:200px;
border:1px solid #d7d7d7;
position:relative;
overflow:hidden;
}
.scroll-dot{
position:absolute;
left:0;
bottom:5px;
width:100%;
}
.scroll-dot li{
display:inline-block;
*display:inline;
*zoom:1;
margin:0 5px;
width:10px;
height:10px;
}
.scroll-dot a{
display:block;
width:100%;
height:100%;
font:1px/1px Arial, Helvetica, sans-serif;
border:1px solid #999;
background:#ddd;
border-radius:5px;
cursor:pointer;
}
.scroll-dot a.hover{
background:#aaa;
}
.scroll-dot a.active{
background:#ff0;
}
jquery代码:
/* @Author stealer */
function Slide(obj,direction,speed){//obj是class名,direction是方向(支持up,down,left,right),speed滚动速度(毫秒为单位).down有个小问题,图片是倒叙来依次显示.
$(“.”+obj).each(function(){
var S=$(this);
var content=$(this).children(“.scroll”);
var top=parseInt(content.css(“margin-top”));
var left=parseInt(content.css(“margin-left”));
var t;
var n=0;//计数,第几个
$(this).append(function(){
var html=”<li><a class=’active’></a></li>”;
for(var i=1;i<content.children(“li”).length;i++){
html+=”<li><a></a></li>”;
}
return(“<ul class=’scroll-dot’>”+html+”</ul>”);
})
$(“.scroll-dot a”).hover(function(){
$(this).toggleClass(“hover”);
});
var dot=$(this).children(“.scroll-dot”).children().children(“a”);
if(direction==”up”){
function scroll(){
top=parseInt(content.css(“margin-top”));
top-=content.children(“li”).height();
n+=1;
if(-top>=content.height()){
content.animate({marginTop:0},500,function(){
n=0;
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
else{
content.animate({marginTop:top},500,function(){
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
}
}
if(direction==”down”){
content.css({“margin-top”:-content.children(“li”).height()*(content.children(“li”).length-1)});
function scroll(){
top=parseInt(content.css(“margin-top”));
top+=content.children(“li”).height();
n+=1;
if(top>0){
content.animate({marginTop:-content.children(“li”).height()*(content.children(“li”).length-1)},500,function(){
n=0;
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
else{
content.animate({marginTop:top},500,function(){
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
}
}
if(direction==”left”){
content.css({“width”:content.children(“li”).width()*content.children(“li”).length});
content.children(“li”).css({“float”:”left”});
function scroll(){
left=parseInt(content.css(“margin-left”));
left-=content.children(“li”).width();
n+=1;
if(-left>=content.width()){
content.animate({marginLeft:0},500,function(){
n=0;
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
else{
content.animate({marginLeft:left},500,function(){
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
}
}
if(direction==”right”){
content.css({“width”:content.children(“li”).width()*content.children(“li”).length,”margin-left”:content.children(“li”).width()*(1-content.children(“li”).length)});
content.children(“li”).css({“float”:”right”});
function scroll(){
left=parseInt(content.css(“margin-left”));
left+=content.children(“li”).width();
n+=1;
if(left>0){
content.animate({marginLeft:-content.children(“li”).width()*(content.children(“li”).length-1)},500,function(){
n=0;
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
else{
content.animate({marginLeft:left},500,function(){
dot.removeClass(“active”);
dot.eq(n).addClass(“active”);
t=setTimeout(function(){scroll()},speed);
});
}
}
}
$(this).mouseover(function(){
clearInterval(t);
dot.each(function(e){
$(this).click(function(){
var that=$(this);
if(direction==”up”){
top=-parseInt(content.children(“li”).height())*e;
content.stop().animate({marginTop:top},500);
}
else if(direction==”down”){
top=parseInt(content.children(“li”).height())*(e-content.children(“li”).length+1);
content.stop().animate({marginTop:top},500);
}
else if(direction==”left”){
left=-parseInt(content.children(“li”).width())*e;
content.stop().animate({marginLeft:left},500);
}
else if(direction==”right”){
left=parseInt(content.children(“li”).width())*(e-content.children(“li”).length+1);
content.stop().animate({marginLeft:left},500);
}
dot.removeClass(“active”);
that.addClass(“active”);
n=e;
});
});
});
$(this).mouseout(function(){
t=setTimeout(function(){scroll()},speed);
});
t=setTimeout(function(){scroll()},speed);
});
}
$(document).ready(function () {
Slide(“banner”,”right”,3000);//示例
});
转载请注明：jquery写的banner焦点图滚动切换效果 - 编程知识库
您可能还会对这些文章感兴趣
-
作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
-
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
-
Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
-
今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
-
BI中文站 6月7日报道 艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...
大家正在看
- Windows文件系统结构
- mysql 将字段time按天/月/年分组
- 新安装mysql 第三方工具连接不上问题
- CentOS 安装MySQL 5.1.69
- mysql下怎样运行脚本以运行niuzi.sql为例
- 访问IIS网站需要输入用户名密码(非匿名登录)问题汇总
- mysql出现“Incorrect key file for table”解决办法
- mysql无法启动——cannot allocate the memory for the buffer pool
- 数据库工具sysbench安装教程和性能测试例子
- Mysql 日志删除
- mysql 修改字段类型 删除字段类型
- 修改mysql字符编码出现Job failed to start解决办法
- mysql数据库的备份、导入、导出命令，以及数据的导入、导出
- Why TokuDB hates Transparent HugePages
推荐阅读
全部分类
本月热门
- U盘安装CentOS7遇到：Warning: dracut-initqueue timeout – starting timeout scripts
- iOS 手势滑动解锁功能简析
- Keras学习环境配置-GPU加速版（Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)
- 【Ubuntu】Ubuntu16.04安装GTX960M显卡驱动
- Ansible系列(二)：选项和常用模块
- 连接ftp出现 331 Please specify the password 的解决办法
- Ubuntu16.04网络连接正常但是无法使用浏览器上网-浏览器代理设置
- Ubuntu 16.04 安装Python 3.6.1及pip
- Android开发-直播视讯(4)-Ubuntu编译ijkplayer的so文件-基础知识
- linux下连接无线网出现nl80211: Could not configure driver mode nl80211: deinit ifname=wlan1 disabled_11b_rate