无缝滚动
http://sandbox.runjs.cn/show/8coev0rq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动.html</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
.wrap{
width: 1000px;
height: 300px;
margin: 100px auto 0;
position: relative;
overflow: hidden;
}
.wrap .slidewrap{
position: absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
.wrap .slidewrap li{
width: 500px;
height: 100%;
float: left;
text-align: center;
line-height: 300px;
font-size: 60px;
font-weight: 600;
}
.left,.right{
position: absolute;
top:50%;
margin-top: -20px;
left:50%;
width: 40px;
height: 40px;
border:1px solid #ccc;
border-radius: 50%;
}
.left{
margin-left: -440px;
}
.right{
margin-left: 400px;
}
.left:before,.right:before{
position: absolute;
content:'';
width:20px;
height: 20px;
border:2px solid #ccc;
border-right:none;
border-bottom:none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top:50%;
left:50%;
margin-top:-10px;
margin-left: -8px;
}
.right:before{
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
margin-left: -15px;
}
.pagination{
position: absolute;
left:0;
width: 100%;
bottom:20px;
text-align: center;
height:15px;
}
.pagination li{
width: 15px;
height:15px;
border-radius: 50%;
margin:0 5px;
background-color: #fff;
display: inline-block;
*display: inline;
*zoom:1;
}
.pagination li.active{
background-color: #1B1A1A;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="slidewrap">
<li style="background:#BBBBBB">1</li>
<li style="background:#9E9494">2</li>
<li style="background:#E8E7E7">3</li>
<li style="background:#565252">4</li>
<li style="background:#1F1818">5</li>
</ul>
<ul class="pagination"></ul>
<a class="left" href=""></a>
<a class="right" href=""></a>
</div>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
;(function(){
var myApp = function(){
var $ul = $('ul.slidewrap');
var $li = $ul.find('li');
var lilen = $li.length;
var $pagination = $('ul.pagination');
var $paginationli;
var liWidth = $li.width();
var timer;
var left = $('.left');
var right = $('.right');
var index = 0;
var flag = false;
var _getWidth = function(){
var liWidth = $li.width();
var ulWidth = liWidth*lilen;
$ul.width(ulWidth);
};
var isAnimate = function(obj){
if(obj.is(':animated')){
flag = true;
}else{
flag = false;
}
return flag;
}
var creatLi = function(){
for(var i = 0;i<lilen;i++){
$paginationli = $('<li></li>');
$pagination.append($paginationli)
}
$pagination.find('li:first').addClass('active');
}
var moveRight = function(){
if(isAnimate($ul)){
return false;
}
$pagination.find('li').removeClass('active');
index++;
if(index>lilen-1){
index = 0;
}
$pagination.find('li').eq(index).addClass('active');
$ul.animate({'left':-liWidth},1000,function(){
$(this).css('left',0).find('li').first().appendTo(this);
})
}
var moveLeft = function(){
if(isAnimate($ul)){
return false;
}
$pagination.find('li').removeClass('active');
index--;
if(index<0){
index = lilen-1;
}
$pagination.find('li').eq(index).addClass('active');
$ul.css('left',-liWidth).find('li').last().prependTo($ul);
$ul.animate({'left':0},1000,function(){
$(this).css('left',0);
});
}
var loop = function(){
timer = setInterval(moveRight,2000);
}
var ClickEvent = function(){
$(document).on('click','.right',function(event){
var e = event||window.event;
e.preventDefault()
clearInterval(timer);
moveRight();
});
$(document).on('click','.left',function(event){
var e = event||window.event;
e.preventDefault()
clearInterval(timer);
moveLeft();
});
}
var mouseEvent = function(){
$(document).on('mouseenter','.wrap',function(){
clearInterval(timer);
});
$(document).on('mouseleave','.wrap',function(){
clearInterval(timer);
timer = setInterval(moveRight,2000);
});
}
var init = function(){
_getWidth();
loop();
creatLi();
ClickEvent();
mouseEvent();
}
return {
init:init
}
}();
myApp.init();
}())
</script>
</body>
</html>
