~~~
<link rel="stylesheet" href="css/banner.css">
<script src="lib/jquery.1.10.2.js"></script>
<script src="js/jq-banner.js"></script>
</head>
<body>
<div class="content">
<div id="list" style="left:-600px">
<img src="img/05.png" alt="">
<img src="img/01.png" alt="">
<img src="img/02.png" alt="">
<img src="img/03.png" alt="">
<img src="img/04.png" alt="">
<img src="img/05.png" alt="">
<img src="img/01.png" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
~~~
banner.css
~~~
*{margin:0;padding:0}
.content{
overflow: hidden;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
width:600px;
height:400px;
border:1px solid #333;
}
.content img{
float:left;
}
#btns .current{
background: orangered;
}
#list{
position: absolute;
height:400px;
width:4200px;
}
#prev,#next{
cursor: pointer;
top:50%;
transform: translateY(-50%);
width:40px;
height:74px;
position: absolute;
z-index: 100;
background: url(../img/icon-slides.png);
border:none;
}
#next{
right:0;
background-position-x:-43px
}
#btns{
bottom: 40px;
left:50%;
transform: translateX(-50%);
position: absolute;
z-index: 101;
}
#btns span{
cursor: pointer;
border-radius: 50%;
width:20px;
height:20px;
display: inline-block;
border:1px solid #fff;
background: rgba(97, 96, 96, 0.3)
}
~~~
jq-banner.js
~~~
$(function () {
var timer;
var index = 0;
$("#next").click(function () {
if (!$("#list").is(":animated")) {
index++;
if (index > 4) {
index = 0;
}
showBtn();
animate(-600);
}
})
$("#prev").click(function () {
if (!$("#list").is(":animated")) {
index--;
if (index < 0) {
index = 4;
}
showBtn();
animate(600)
}
})
function animate(offset) {
var newLeft = $("#list").position().left + offset
$("#list").animate({ left: newLeft + "px" }, 500, function () {
if (newLeft < -3000) {
$("#list").css({ left: "-600px" })
}
if (newLeft > -600) {
$("#list").css({ left: "-3000px" })
}
})
}
function showBtn() {
$("#btns>span").eq(index).addClass("current").siblings().removeClass("current");
}
$("#btns>span").click(function(){
var offset = ($(this).index()-index)*-600;
console.log(offset);
index = $(this).index();
showBtn();
animate(offset);
})
function play(){
timer = setInterval(function(){
$("#next").click()
},1000)
}
play();
function stop(){
clearInterval(timer);
}
$(".content").mouseover(function(){
stop();
})
$(".content").mouseout(function(){
play();
})
})
~~~
