Jquery图片滚动与幻灯片的实例代码
1、图片滚动
. 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的p的class值这里就行---------------------
});
function xhun(_box) {
var box_frame = _box + " p ul";
var box_p = _box + " p";
$(_box).find("ul").wrap("<p></p>"); //添加一个p，来控制偏移量
$(box_p).append($(box_frame).clone()); //克隆一个ul并添加到p中，为了实现无缝循环
$(box_p).append($(box_frame).clone()); //克隆一个ul并添加到p中，为了实现无缝循环
var li_size = $(_box).find("li").size(); //获取li的个数
var li_width = $(box_frame).children("li").width(); //获取li的宽度
var box_p_width = $(box_p).width(li_size * li_width * 5); //设置p的宽度
$(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>
<style type="text/css">
* { 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>
<p class="a">
<ul>
<li><a href="#">
<img src="wife1.jpg" alt="img" title="img" /></a></li>
<li><a href="#">
<img src="wife2.jpg" alt="img" title="img" /></a></li>
</ul>
</p>
</body>
</html>
2、幻灯片
. 代码如下:
<!doctype html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>幻灯片切换</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的p的class值这里就行---------------------
});
function slide(cls) {
$(cls).find("ul").wrap("<p></p>");
$(cls+" p").attr("class","iframe");
var li = $(cls).find("li").size();//统计多少张图片
var li_width = $(cls).find("li").width(); //获取li的宽度
$(cls + " p").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));//生成按钮结束,并添加到最大p里面
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 + " p").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>
<style type="text/css">
* { margin: 0; padding: 0; }
li, ul { list-style: none; margin: 0; padding: 0; }
.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大p的宽度和高度*/
.iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该p的宽度和高度*/
.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; }
</style>
</head>
<body>
<!-- 这里要按照这样的格式来写 -->
<p class="frame">
<ul>
<li><a href="#">
<img src="wife1.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="wife2.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="wife3.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="wife4.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="wife5.jpg" width="280" height="280" alt="img" /></a></li>
</ul>
</p>
</body>
</html>
上一篇： Steam正式进入中国