jQuery底部带导航的图片切换，定时上下滚动效果（无滚轮切换效果）
2014-10-21 21:53
826 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery上下页面视差滚动切换效果|强大的视差响应动画滑动图片切换效果
- js鼠标滚轮滚动图片切换效果
- 完善as3图片上下切换，自己滚动效果
- jQuery插件实例三：图片滚动[切换]效果一
- xSlider 可左右、上下图片切换的无缝滚动效果
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- jQuery 写的插件图片上下切换幻灯效果
- jquery制作banner图片左右上下切换滚动特效
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- Jquery仿新浪微博图片文字列表淡进淡出上下滚动效果
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- jquery图片上下tab切换效果
- jQuery实用导航上下滑动及左右切换效果QQ浏览器
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果
- 使用viewpager嵌套实现上下左右滑动切换图片（IOS双向滚动翻页效果相同）
- jQuery 循环图片滚动切换效果代码
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- jquery banner广告幻灯片图片轮播切换,模仿实现当当网滚动广告效果