纳金网

标题: jQuery模拟图片切换，点击按钮动态滚动内容 [打印本页]

作者: 奇 时间: 2011-12-30 19:03
标题: jQuery模拟图片切换，点击按钮动态滚动内容
jQuery模拟图片切换效果，当我们使用图片点击按钮时，内容动态滚动，这里的内容您完全可以替换为JPG或其它格式的图片，类似于此的效果还有烈火网于今年10月12日发表的《jQuery+Css模拟带标题导航的图片切换效果》，您可以回顾一下。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　运行演示：
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>图片左右滚动</title>

<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script>

$(function(){

var i=0;

var li = $(".lxfscroll li");

var n=li.length-1;

var speed = 300;

li.not(":first").css({left:"400px"});

li.eq(n).css({left:"-400px"});

lxfNext=function (){

if (!li.is(":animated")) {

if (i>=n){i=0;li.eq(n).animate({left:"-400px"},speed);

li.eq(i).animate({left:"0px"},speed);

}else{i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);};

li.not("eq(i)").css({left:"400px"});

$("i").text(i+1);

}else{};

};

lxfLast=function (){

if (!li.is(":animated")) {

if (i<=0){i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);

}else{i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);}

li.not("eq(i)").css({left:"-400px"});

$("i").text(i+1);

};

};

});

</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;

overflow: hidden;

position: relative;

height: 300px;

border: 1px dashed #CCC;

}

.button {

margin-right:auto;

margin-left:auto;

width:400px;

text-align:center;

padding-top: 10px;

}

i {

color:#F00;

font-weight:bold;

}

.button input {

padding-top: 4px;

padding-right: 12px;

padding-bottom: 4px;

padding-left: 12px;

}

.lxfscroll ul li {

height: 300px;

width: 400px;

text-align: center;

line-height: 300px;

position: absolute;

font-size: 40px;

font-weight: bold;

}

</style>

</head>

<body>

<div class="lxfscroll">

<ul>

<li>我是第1张图片</li>

<li>我是第2张图片</li>

<li>我是第3张图片</li>

<li>我是第4张图片</li>

<li>我是第5张图片</li>

<li>我是第N张图片</li>

</ul>

</div>

<div class="button">

<input name="a" type="button" onClick="lxfLast()" value="上一个" />

<input name="a" type="button" onClick="lxfNext()" value="下一个" />

</div>

<div class="button">当前显示的是第 <i>1</i> 张图片</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/43357.html

作者: osaka 时间: 2011-12-30 19:11

好帖～

作者: 奇 时间: 2012-1-6 20:23
原帖由 osaka 于 2011-12-30 19:11 发表:

好帖～
-----------------------------------------------------

作者: 晃晃 时间: 2012-1-27 23:31
2012年祝你好事多赢，发点小财；好事不断，交点小运；马上升职，做个小官；得个表彰，露个小脸；生活无忧，喝点小酒；预祝新年快乐，眯眯小眼。龙年春节祝福语

作者: 菜刀吻电线 时间: 2012-2-6 23:30
不错哦,顶一下......

作者: 菜刀吻电线 时间: 2012-4-11 23:21
读铁系缘分，顶铁系友情

作者: C.R.CAN 时间: 2012-4-19 23:19
发了那么多，我都不知道该用哪个给你回帖了，呵呵

作者: C.R.CAN 时间: 2012-5-25 23:20
顶!学习了!阅!

作者: 奇 时间: 2012-6-29 23:22
呵呵,真得不错哦!!

作者: 奇 时间: 2012-7-22 23:21
我是老实人,我来也!

作者: tc 时间: 2012-8-15 23:52
佩服，好多阿，哈哈

作者: 奇 时间: 2012-8-22 00:23
好可爱的字,学习了

作者: 奇 时间: 2012-12-6 23:27
凡系斑竹滴话要听；凡系朋友滴帖要顶

作者: 晃晃 时间: 2012-12-16 23:20
不错哦,谢谢楼主

作者: 奇 时间: 2013-2-4 23:22
先垫一块，再说鸟

作者: tc 时间: 2013-2-14 23:26
佩服，好多阿，哈哈

作者: C.R.CAN 时间: 2013-2-22 23:24
读铁系缘分，顶铁系友情

作者: 晃晃 时间: 2013-3-19 23:26
有意思！学习了！

欢迎光临纳金网 (http://course.narkii.com/club/)