<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>css和jquery配合完成-ipad向左向右拖拽换灯片</title>
<script type="text/javascript" src="http://www.cwydesign.com/effects/UploadFiles_7074/201211/2012110311013179.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0px;}
body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursor:pointer;}
.container {width:700px; height:340px; overflow:hidden; margin:50px auto; position:relative; border:20px solid #333; border-radius:5px; box-shadow:0 40px 25px -25px rgba(0,0,0,0.8); border-bottom:0; background:#333; z-index:10; cursor: w-resize;}
.pad {width:50px; height:300px;}
.right {float:right;}
.slide {width:60000px; position:absolute; left:0; top:0; z-index:-1;}
.slide img {display:block; float:left;}
.container .buttons {position:absolute; top:310px; background:#333; height:20px;}
.container .buttons b {display:block; width:10px; height:10px; overflow:hidden; margin:5px; background:#069; float:left; border-radius:10px;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0,
slideCount = $('.slide img').length;
$('.slide img').each(function (i) {
$('.container .buttons').append('<b></b>')
});
$('.container .buttons b').eq(0).css('background','#6cf');
buttonWidth = $('.container .buttons').width();
$('.container .buttons').css('left', (700-buttonWidth)/2 + 'px');
$('.container').live('mousedown touchstart', slideStart);
$('.container').live('mouseup mousestop touchend', slideEnd);
$('.container').live('mousemove mousedown touchmove', slide);
$('.container .pad').live('mousemove mousedown touchmove', slideEnd);function slideStart(event) {
if (event.originalEvent.touches)
event = event.originalEvent.touches[0];
if (sliding == 0) {
sliding = 1;
startClientX = event.clientX;
}
}
function slide(event) {
event.preventDefault();
if (event.originalEvent.touches)
event = event.originalEvent.touches[0];
var deltaSlide = event.clientX - startClientX;
if (sliding == 1 && deltaSlide != 0) {
sliding = 2;
startPixelOffset = pixelOffset;
}
if (sliding == 2) {
var touchPixelRatio = 1;
if ((currentSlide == 0 && event.clientX > startClientX) || (currentSlide == slideCount - 1 && event.clientX < startClientX))
touchPixelRatio = 3;
pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
$(".slide").css('left',pixelOffset +'px');
}
}
function slideEnd(event) {
if (sliding == 2) {
sliding = 0;
currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide - 1;
currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);
pixelOffset = currentSlide * -$('.slide img').width();
$('.container .buttons b').css('background','#069');
$('.container .buttons b').eq(currentSlide).css('background','#6cf');
$(".slide").animate({left:pixelOffset}, 250);
}
}
});
</script>
<div class="container"><div class="pad right"></div><div class="pad"></div>
<div class="slide" style="left: 11.666666666666666px; ">
<img src="http://www.cwydesign.com/effects/UploadFiles_7074/201211/2012110311052914.jpg" alt="">
<img src="http://www.cwydesign.com//effects/UploadFiles_7074/201211/2012110311055762.jpg" alt="">
<img src="http://www.cwydesign.com//effects/UploadFiles_7074/201211/2012110311060868.jpg" alt="">
</div>
<div class="buttons" style="left: 210px; ">
</div>
</div>
</body>
</html> |
注册 登录
