<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery上下滚动效果的图片切换_烈火学院VERYHUO.COM</title>
<script src="http://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(function(){
var lxfscroll_ul = $(".lxfscroll ul");
var lxfscroll_li = $(".lxfscroll li");
var lxfscroll_tli = $(".lxfscroll-title li");
var lxfscroll_speed = 350;//切换的速度
var lxfscroll_autospeed = 2000;//自动播放的速度
var lxfscroll_n = 0;
var lxfscroll_imgheight = $(".lxfscroll li img").attr("height");//获取图片高度
var lxfscroll_lilength = lxfscroll_li.length;//获取图片数量
var lxfscroll_timer;
var lxfscroll_alt = $(".lxfscroll-alt");
/* 标题按钮事件 */
function lxfscroll() {
lxfscroll_tli.mouseenter(function(){
var lxfscroll_index = lxfscroll_tli.index($(this));
var lxfscroll_lipoint = lxfscroll_index*lxfscroll_imgheight;
var lxfscroll_imgTitle = $(".lxfscroll li img").eq(lxfscroll_index).attr("alt");
lxfscroll_alt.text(lxfscroll_imgTitle);
lxfscroll_tli.removeClass("cur");
$(this).addClass("cur");
lxfscroll_ul.stop(true,false).animate({"top":-lxfscroll_lipoint+"px"},lxfscroll_speed);
});
};
/* 自动轮换 */
function lxfscroll_autoroll() {
if(lxfscroll_n >= lxfscroll_lilength) {lxfscroll_n = 0;}
var lxfscroll_lipoint = lxfscroll_n*lxfscroll_imgheight;
var lxfscroll_imgTitle = $(".lxfscroll li img").eq(lxfscroll_n).attr("alt");
lxfscroll_ul.stop(true,false).animate({"top":-lxfscroll_lipoint+"px"},lxfscroll_speed);
lxfscroll_tli.removeClass("cur").eq(lxfscroll_n).addClass("cur");
lxfscroll_alt.text(lxfscroll_imgTitle);
lxfscroll_n++;
lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed);
};
/* 鼠标悬停即停止自动轮换 */
function lxfscroll_stoproll() {
lxfscroll_li.hover(function() {
clearTimeout(lxfscroll_timer);
lxfscroll_n = $(this).prevAll().length+1;
}, function() {
lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed);
});
lxfscroll_tli.hover(function() {
clearTimeout(lxfscroll_timer);
lxfscroll_n = $(this).prevAll().length+1;
}, function() {
lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed);
});
};
lxfscroll();
lxfscroll_autoroll();lxfscroll_stoproll();//启动自动播放功能
});
</script>
<style type="text/css">
* {
font-size:12px;
color:#333;
text-decoration:none;
padding:0;
margin:0;
list-style:none;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
.lxfscroll {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
position: relative;
height: 300px;
border: 4px solid #EFEFEF;
overflow: hidden;
}
.lxfscroll ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
font-size: 40px;
font-weight: bold;
background-color: #CCC;
float: left;
}
.lxfscroll-title {
width: 400px;
margin-left: auto;
margin-right: auto;
}
.lxfscroll-title li {
float: left;
line-height: 20px;
text-align: center;
border: 1px dashed #CCC;
margin-top: 2px;
cursor: pointer;
margin-right: 2px;
padding: 8px;
}
.cur {
color: #FFF;
font-weight: bold;
background:#000;
}
.lxfscroll ul {
position: absolute;
}
.lxfscroll-alt {
position: absolute;
bottom: 0px;
z-index: 5;
background-color: #666;
width: 384px;
color: #FFF;
padding: 8px;Opacity=80);-moz-opacity:0.5;opacity: 0.5;
}
</style>
</head>
<body>
<div class="lxfscroll">
<div class="lxfscroll-alt">图标文字标题</div>
<ul><li><img src="http://a2.att.hudong.com/64/23/01300000165495121559238711663.jpg" width="400" height="300" alt="Koala"/></li><li><img src="http://www.ctps.cn/photonet/profiles2011/20120126/20121261616439162.jpg" width="400" height="300" alt="Lighthouse"/></li><li><img src="http://img5.imgtn.bdimg.com/it/u=512087622,3401405921&fm=23&gp=0.jpg" width="400" height="300" alt="Penguins"/></li><li><img src="http://picapi.ooopic.com/10/90/23/54b1OOOPICa6.jpg" width="400" height="300" alt="Tulips"/></li></ul>
</div>
<div class="lxfscroll-title">
<ul>
<li class="cur">Koala</li>
<li>Lighthouse</li>
<li>Penguins</li>
<li>Tulips</li>
</ul>
</div>
</body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery上下滚动效果的图片切换_烈火学院VERYHUO.COM</title>
<script src="http://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(function(){
var lxfscroll_ul = $(".lxfscroll ul");
var lxfscroll_li = $(".lxfscroll li");
var lxfscroll_tli = $(".lxfscroll-title li");
var lxfscroll_speed = 350;//切换的速度
var lxfscroll_autospeed = 2000;//自动播放的速度
var lxfscroll_n = 0;
var lxfscroll_imgheight = $(".lxfscroll li img").attr("height");//获取图片高度
var lxfscroll_lilength = lxfscroll_li.length;//获取图片数量
var lxfscroll_timer;
var lxfscroll_alt = $(".lxfscroll-alt");
/* 标题按钮事件 */
function lxfscroll() {
lxfscroll_tli.mouseenter(function(){
var lxfscroll_index = lxfscroll_tli.index($(this));
var lxfscroll_lipoint = lxfscroll_index*lxfscroll_imgheight;
var lxfscroll_imgTitle = $(".lxfscroll li img").eq(lxfscroll_index).attr("alt");
lxfscroll_alt.text(lxfscroll_imgTitle);
lxfscroll_tli.removeClass("cur");
$(this).addClass("cur");
lxfscroll_ul.stop(true,false).animate({"top":-lxfscroll_lipoint+"px"},lxfscroll_speed);
});
};
/* 自动轮换 */
function lxfscroll_autoroll() {
if(lxfscroll_n >= lxfscroll_lilength) {lxfscroll_n = 0;}
var lxfscroll_lipoint = lxfscroll_n*lxfscroll_imgheight;
var lxfscroll_imgTitle = $(".lxfscroll li img").eq(lxfscroll_n).attr("alt");
lxfscroll_ul.stop(true,false).animate({"top":-lxfscroll_lipoint+"px"},lxfscroll_speed);
lxfscroll_tli.removeClass("cur").eq(lxfscroll_n).addClass("cur");
lxfscroll_alt.text(lxfscroll_imgTitle);
lxfscroll_n++;
lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed);
};
/* 鼠标悬停即停止自动轮换 */
function lxfscroll_stoproll() {
lxfscroll_li.hover(function() {
clearTimeout(lxfscroll_timer);
lxfscroll_n = $(this).prevAll().length+1;
}, function() {
lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed);
});
lxfscroll_tli.hover(function() {
clearTimeout(lxfscroll_timer);
lxfscroll_n = $(this).prevAll().length+1;
}, function() {
lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed);
});
};
lxfscroll();
lxfscroll_autoroll();lxfscroll_stoproll();//启动自动播放功能
});
</script>
<style type="text/css">
* {
font-size:12px;
color:#333;
text-decoration:none;
padding:0;
margin:0;
list-style:none;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
.lxfscroll {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
position: relative;
height: 300px;
border: 4px solid #EFEFEF;
overflow: hidden;
}
.lxfscroll ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
font-size: 40px;
font-weight: bold;
background-color: #CCC;
float: left;
}
.lxfscroll-title {
width: 400px;
margin-left: auto;
margin-right: auto;
}
.lxfscroll-title li {
float: left;
line-height: 20px;
text-align: center;
border: 1px dashed #CCC;
margin-top: 2px;
cursor: pointer;
margin-right: 2px;
padding: 8px;
}
.cur {
color: #FFF;
font-weight: bold;
background:#000;
}
.lxfscroll ul {
position: absolute;
}
.lxfscroll-alt {
position: absolute;
bottom: 0px;
z-index: 5;
background-color: #666;
width: 384px;
color: #FFF;
padding: 8px;Opacity=80);-moz-opacity:0.5;opacity: 0.5;
}
</style>
</head>
<body>
<div class="lxfscroll">
<div class="lxfscroll-alt">图标文字标题</div>
<ul><li><img src="http://a2.att.hudong.com/64/23/01300000165495121559238711663.jpg" width="400" height="300" alt="Koala"/></li><li><img src="http://www.ctps.cn/photonet/profiles2011/20120126/20121261616439162.jpg" width="400" height="300" alt="Lighthouse"/></li><li><img src="http://img5.imgtn.bdimg.com/it/u=512087622,3401405921&fm=23&gp=0.jpg" width="400" height="300" alt="Penguins"/></li><li><img src="http://picapi.ooopic.com/10/90/23/54b1OOOPICa6.jpg" width="400" height="300" alt="Tulips"/></li></ul>
</div>
<div class="lxfscroll-title">
<ul>
<li class="cur">Koala</li>
<li>Lighthouse</li>
<li>Penguins</li>
<li>Tulips</li>
</ul>
</div>
</body>
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
