jquery实现无缝图片滚动

最新推荐文章于 2024-04-23 11:28:13 发布

lzf0514

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量142

点赞数

分类专栏： javascript css+xhtml 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/lzf0514/article/details/84052757

版权

javascript 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

css+xhtml

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="爱结网（来自纽约，最顶级的婚礼网站）&动感101电台联袂推出的大型活动"全上海都在相信爱情"中最受女孩子们关注的"巴士新娘变身秀"日前在上海新江湾城SMP滑板公园盛大举行，有爱结网全程提供的最新款婚纱、新娘妆、发型服务，让平凡的女孩子圆了幸福新娘梦想！" />
<meta name="keywords" content="爱结,爱结上海,爱结网站,全上海都相信爱情,公车新娘变身秀,爱结活动,新娘换装,新娘造型,婚纱摄影,个性婚纱" />
<meta name="robots" content="FOLLOW,INDEX" />
<link rel="Shortcut Icon" type="image/ico" href="http://content1.ijie.cn/zh-CN/image/sitecore/favicon.ico" />
<title>爱结上海全上海都相信爱情之公车新娘变身秀 - 爱结 ijie.com</title>

<link href="http://content2.ijie.cn/zh-CN/20111021/style/ijieevents/shbusshow2011/global.css" rel="stylesheet" type="text/css" />
<link href="http://content2.ijie.cn/zh-CN/20111021/style/ijieevents/shbusshow2011/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://content2.ijie.cn/zh-CN/script/common/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var pic = $(".eventspicslidebox ul");
var prevbtn = $(".prevbtn");
var nextbtn = $(".nextbtn");
var auto = setTimeout(movetoleft, 3000);
nextbtn.bind("click", function () {
clearTimeout(auto);
movetoleft();
});
prevbtn.bind("click", function () {
clearTimeout(auto);
movetoright();
});
function movetoleft() {
pic.animate({ left: "-150px" }, 500, function () {
pic.children().first().appendTo(pic);
pic.css("left", "0");
auto = setTimeout(movetoleft, 3000);
});
}
function movetoright() {
pic.children().last().prependTo(pic);
pic.css("left", "-150px");
pic.animate({ left: "0px" }, 500, function () {
auto = setTimeout(movetoleft, 3000);
});
}
});
</script>
</head>

<body>
<section class="eventspicslide">
<header>精彩花絮</header>
<div class="eventspicslide-c clearfix">
<div class="eventspicslidebox">
<ul class="clearfix">
<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览1</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览2</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览3</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览浦江游览浦江游览浦江游览4</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览5</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览6</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览7</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览8</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览9</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览10</a>
</figcaption>
</figure>
</li>

<li>
<figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
<figcaption>
<a class="" target="_blank" href="" title="">浦江游览11</a>
</figcaption>
</figure>
</li>
</ul>
</div>
<div class="prevbtn"></div>
<div class="nextbtn"></div>
</div>
</section>
</body>
</html>

lzf0514

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现无缝图片滚动

爱结上海全上海都相信爱情之公车新娘变身秀 - 爱结 ijie.com $(document).ready(function () { var pic = $(".eventspicslidebox ul"); var prevbtn = $(".prevbtn"); var nex...
复制链接

扫一扫

专栏目录