[经验分享] jQuery底部带导航的图片切换，上下滚动效果

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:13:55 |只看该作者 |倒序浏览

jQuery实现图片底部带导航的幻灯片切换代码，在切换时有上下滚动效果，并且当鼠标滑动经过底部的导航按钮时，图片就会切换，也可以叫做滑动式图片切换，还有图片的文字说明标题，聪明的你一看就知道这是翻译自国外网站的代码。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
　　点击查看：网页特效
　　运行演示：
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>jQuery上下滚动效果的图片切换_烈火学院VERYHUO.COM</title>

<script src="/uploads/common/js/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(***e,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(***e,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="/uploads/common/images/wall2.jpg" width="400" height="300" alt="Koala"/></li><li><img src="/uploads/common/images/wall6.jpg" width="400" height="300" alt="Lighthouse"/></li><li><img src="/uploads/common/images/wall3.jpg" width="400" height="300" alt="

enguins"/></li><li><img src="/uploads/common/images/wall4.jpg" width="400" height="300" alt="Tulips"/></li></ul>

</div>

<div class="lxfscroll-title">

<ul>

<li class="cur">Koala</li>

<li>Lighthouse</li>

<li>

enguins</li>

<li>Tulips</li>

</ul>

</div>

</body>

</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43715.html