裁剪法实现_图片无缝左右切换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>裁剪法实现---无缝左右切换</title>
<meta name="Keywords" content="关键字,关键字">
<meta name="description" content="">
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
/\* start scroll */
#scroll{width:512px;height:384px;margin:100px auto 0;border:1px solid #DDD;position:relative;}
#scroll img.prev{position:absolute;top:167px;left:20px;}
#scroll img.next{position:absolute;top:167px;right:20px;}
#scroll .list{width:512px;height:384px;background:#CFF;overflow:hidden;position:relative;}
#scroll .list ul{width:4000px;height:384px;position:absolute;}
#scroll .list ul li{width:512px;height:384px;float:left;list-style:none;}
/\* scroll end */
</style>
</head>
<body>
<!\-\- start scroll -->
<div id="scroll">
<div class="list">
<ul>
<li><img src="images/1.jpg" width="512" height="384" alt=""/></li>
<li><img src="images/2.jpg" width="512" height="384" alt=""/></li>
<li><img src="images/3.jpg" width="512" height="384" alt=""/></li>
<li><img src="images/4.jpg" width="512" height="384" alt=""/></li>
<li><img src="images/5.jpg" width="512" height="384" alt=""/></li>
<li><img src="images/6.jpg" width="512" height="384" alt=""/></li>
<li><img src="images/7.jpg" width="512" height="384" alt=""/></li>
</ul>
</div>
<img src="images/prev.png" width="50" height="50" alt="" class="prev"/>
<img src="images/next.png" width="50" height="50" alt="" class="next"/>
</div>
<!\-\- scroll end -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$("#scroll img.prev").click(function() {
$(".list ul").prepend($(".list ul li:last"));
$(".list ul").css("left", "-512px");
$(".list ul").animate({"left" : "0px"}, 500);
});
$("#scroll img.next").click(function() {
$(".list ul").animate({"left" : "-512px"}, 500, function() {
$(".list ul").append($(".list ul li:first"));
$(".list ul").css("left", "0px");
});
});
var autoPlay = setInterval(function() {
$("#scroll img.next").click();
}, 2000);
$(".list ul").hover(function() {
clearInterval(autoPlay);
}, function() {
autoPlay = setInterval(function() {
$("#scroll img.next").click();
}, 2000);
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/02/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读