jquery 点击按钮双向双图轮播

来源：互联网发布：vc socket编程重连编辑：程序博客网时间：2024/06/06 03:28
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>图片左右滚动</title><script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></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"});var i2=0;var li2 = $(".lxfscroll2 li");var n2=li2.length-1;var speed = 300;li2.not(":first").css({left:"400px"});li2.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 {            }            ;if (!li2.is(":animated")) {                if (i2 >= n) {                    i2 = 0;                    li2.eq(n).animate({left: "-400px"}, speed);                    li2.eq(i).animate({left: "0px"}, speed);                } else {                    i2++;                    li2.eq(i - 1).animate({left: "-400px"}, speed);                    li2.eq(i).animate({left: "0px"}, speed);                }                ;                li2.not("eq(i)").css({left: "400px"});                $("i").text(i2 + 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);    }    ;    if (!li2.is(":animated")) {        if (i2 <= 0) {            i2 = n;            li2.eq(0).animate({left: "400px"}, speed);            li2.eq(n).animate({left: "0px"}, speed);        } else {            i2--;            li2.eq(i + 1).animate({left: "400px"}, speed);            li2.eq(i).animate({left: "0px"}, speed);        }        li2.not("eq(i)").css({left: "-400px"});        $("i").text(i2 + 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;}.lxfscroll2 {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;}.lxfscroll2 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="focus_box">                    <div class="lxfscroll">                        <ul>                            <li><a href="#"><img src="/static/images/default/pic_1.png" alt="" />1</a></li>                            <li><a href="#"><img src="/static/images/default/pic_2.png" alt="" />2</a></li>                            <li><a href="#"><img src="/static/images/default/pic_3.png" alt="" />3</a></li>                            <li><a href="#"><img src="/static/images/default/pic_4.png" alt="" />4</a></li>                            <li><a href="#"><img src="/static/images/default/pic_5.png" alt="" />5</a></li>                            <li><a href="#"><img src="/static/images/default/pic_6.png" alt="" />6</a></li>                            <li><a href="#"><img src="/static/images/default/pic_7.png" alt="" />7</a></li>                        </ul>                    </div>                        <div class="lxfscroll2">                            <ul>                                <li><a href="#"><img src="/static/images/default/pic_11.png" alt="" />1</a></li>                                <li><a href="#"><img src="/static/images/default/pic_12.png" alt="" />2</a></li>                                <li><a href="#"><img src="/static/images/default/pic_13.png" alt="" />3</a></li>                                <li><a href="#"><img src="/static/images/default/pic_14.png" alt="" />4</a></li>                                <li><a href="#"><img src="/static/images/default/pic_15.png" alt="" />5</a></li>                                <li><a href="#"><img src="/static/images/default/pic_16.png" alt="" />6</a></li>                                <li><a href="#"><img src="/static/images/default/pic_17.png" alt="" />7</a></li>                            </ul>                        </div>                </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>
0 0