<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
.wrapper {
width: 670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul {
position: relative;
}
ul li {
position: absolute;
top: 0;
left: 0;
}
ol {
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li {
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #fff;
}
ol li.current {
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="box">
<li style="z-index: 6;"><img src="1.jpg" /></li>
<li style="z-index: 5;"><img src="2.jpg" /></li>
<li style="z-index: 4;"><img src="3.jpg" /></li>
<li style="z-index: 3;"><img src="4.jpg" /></li>
<li style="z-index: 2;"><img src="5.jpg" /></li>
<li style="z-index: 1;"><img src="6.jpg" /></li>
</ul>
<ol style="z-index: 10;" id="uu">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
var loupe = (function () {
var $box = $('#box');
var $uubox = $('#uu');
var timer = null;
return {
init() {
this.events();
this.autoPlay();
},
events() {
var _this = this;
$uubox.on('click', 'li', function () {
_this.showImg($(this).index());
_this.autoPlay($(this).index());
})
},
showImg(index) {
$uubox.children('li').eq(index).addClass('current').siblings().removeClass('current');
$box.children('li').eq(index).fadeIn().siblings().fadeOut();
},
autoPlay(index) {
var _this = this;
index = index || 0;
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index == $($uubox).children('li').length) {
index = 0;
}
_this.showImg(index);
}, 1000);
}
}
})();
loupe.init();
</script>
