Jquery图片滚动与幻灯片的实例代码

　　1、图片滚动

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　$(document).ready(function () {

　　Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------

　　});

　　function Xhun(_box) {

　　var box_frame = _box + " div ul";

　　var box_div = _box + " div";

　　$(_box).find("ul").wrap("<div></div>"); //添加一个div，来控制偏移量

　　$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中，为了实现无缝循环

　　var li_size = $(_box).find("li").size(); //获取li的个数

　　var li_width = $(box_frame).children("li").width(); //获取li的宽度

　　var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度

　　$(box_frame).css("float", "left");

　　var dd = setInterval(gd, 30);

　　function gd() {

　　var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的水平偏移量

　　$(_box).scrollLeft(position + 1);

　　if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否大于ul的总长度

　　}

　　$(_box).mouseleave(function () {

　　dd = setInterval(gd, 30);

　　}).mouseenter(function () {

　　clearInterval(dd);

　　});

　　}

　　</script>

　　* { margin: 0; padding: 0; }

　　ul { list-style: none; }

　　li { float: left; margin-left: 10px; width: 100px; }

　　img { width: 100px; height: 100px; }

　　.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }

　　</style>

　　</head>

　　<body>

　　<ul>

　　</ul>

　　</div>

　　</body>

　　</html>

　　2、幻灯片

复制代码代码如下:

　　<!DOCTYPE html>

　　<head>

　　<title>幻灯片切换</title>

　　$(document).ready(function () {

　　slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的div的class值这里就行---------------------

　　});

　　function slide(cls) {

　　$(cls).find("ul").wrap("<div></div>");

　　$(cls+" div").attr("class","iframe");

　　var li = $(cls).find("li").size();//统计多少张图片

　　var li_width = $(cls).find("li").width(); //获取li的宽度

　　$(cls + " div").children("ul").width(li_width * li);//设置宽度，使图片排成一排

　　var s = "<ul class='button'>";//生成li的按钮

　　for (var i = 0; i < li; i++) {

　　s += "<li>" + (i + 1) + "</li>";

　　}

　　s += "</ul>";

　　$(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面

　　var _i = 0;//当前的编号

　　$(cls).find(".button li").each(function (i) {

　　//生成按钮点击事件

　　$(this).click(function () {

　　_i = i;

　　$(this).attr("class", "on").siblings().removeAttr("class");//设置class，没必要再多加一个off

　　$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动

　　});

　　}).eq(0).click();

　　function tt() {//定时器函数

　　_i++;

　　_i = _i % li;

　　$(cls).find(".button li").eq(_i).click();//自动点击切换图片

　　}

　　var t = setInterval(tt, 3000);//定时器

　　$(cls).hover(function () {

　　clearInterval(t);//鼠标经过清除定时器，离开时又触发

　　}, function () {

　　t = setInterval(tt, 3000);

　　})

　　}

　　</script>

　　* { margin: 0; padding: 0; }

　　li, ul { list-style: none; margin: 0; padding: 0; }

　　.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大div的宽度和高度*/

　　.iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该div的宽度和高度*/

　　.iframe ul li { float: left; width: 280px; } /*这里需要修改li的宽度*/

　　.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }

　　.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }

　　.button .on { color: #000; background: #fff; }