您的位置：首页 > Web前端

裁剪法实现_图片无缝左右切换

2017-02-22 00:00 405 查看

<!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>


<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>


<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Web前端图片无缝切换裁剪法

相关文章推荐

新的分享

章节导航