<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 600px;
height: 168px;
margin: 0px auto;
overflow: hidden;
background-color: #333;
position: relative;
}
.ctx{
width: 1800px;
height: 168px;
display: flex;
position: absolute;
}
.ctx .cc{
width: 600px;
height: 168px;
display: flex;
justify-content: space-between;
background-color: #ccc;
}
.left,.right{
width: 50px;
height: 50px;
background-color: black;
color: white;
text-align: center;
line-height: 50px;
font-size: 25px;
margin: 0 auto;
cursor: pointer;
}
</style>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".left").click(function(){
var left = $(".ctx").css("left");
var leftSum = parseInt(left.substr(0,left.length-2));
if(leftSum == -1200){
leftSum = 0;
}else{
leftSum-=600;
}
console.log(leftSum);
//選擇沒有正在進行動畫的元素
$(".ctx:not(:animated)").animate({"left":leftSum+"px"},500);
});
$(".right").click(function(){
var left = $(".ctx").css("left");
var leftSum = parseInt(left.substr(0,left.length-2));
if(leftSum == 0){
leftSum = -1200;
}else{
leftSum+=600;
}
console.log(leftSum);
//選擇沒有正在進行動畫的元素
$(".ctx:not(:animated)").animate({"left":leftSum+"px"},500);
});
});
</script>
</head>
<body>
<div class="box">
<div class="ctx">
<div class="cc">
<div class="me">
<img src="image/f1.jpg" >
</div>
<div class="me">
<img src="image/f2.jpg" >
</div>
<div class="me">
<img src="image/f3.jpg" >
</div>
</div>
<div class="cc">
<div class="me">
<img src="image/f4.jpg" >
</div>
<div class="me">
<img src="image/f5.jpg" >
</div>
<div class="me">
<img src="image/f6.jpg" >
</div>
</div>
<div class="cc">
<div class="me">
<img src="image/f7.jpg" >
</div>
<div class="me">
<img src="image/f4.jpg" >
</div>
<div class="me">
<img src="image/f8.jpg" >
</div>
</div>
</div>
</div>
<div class="left">
<
</div>
<div class="right">
>
</div>
</body>
</html>
JQuery 實現圖片滑動實例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【CSS基礎篇】——常用屬性
文字的設置 顏色 div{ color: #FF0000; color: red; color: rgb(255,0,0); color: rgba(255,0,0,0.5); } 設置顏色有以
【HTML】HTML 鼠標懸停於圖片顯示文字
在 img 元素中添加 title 屬性： <img src="images/logo.gif" alt="bupt_logo" title="bupt"/>