slide.css
.ck-slide ul {
margin:0;
padding:0;
list-style-type:none;
}
.ck-slide {
overflow:hidden;
position:relative;
}
.ck-slide ul.ck-slide-wrapper {
top:0;
left:0;
z-index:1;
margin:0;
padding:0;
position:absolute;
}
.ck-slide ul.ck-slide-wrapper li {
position:absolute;
}
.ck-slide .ck-ctrl {
}
.ck-slide .ck-prev,
.ck-slide .ck-next {
top:50%;
z-index:2;
width:35px;
height:70px;
opacity:.15;
background:red;
margin-top:-35px;
position:absolute;
border-radius:3px;
text-indent:-9999px;
background-repeat:no-repeat;
transition:opacity .2s linear 0s;
}
.ck-slide .ck-prev {
left:5px;
background:url(../images/arrow-left.png) #000 no-repeat center center;
}
.ck-slide .ck-next {
right:5px;
background:url(../images/arrow-right.png) #000 no-repeat center center;
}
.ck-slidebox {
left:50%;
z-index:30;
position:absolute;
bottom:12px;
}
.ck-slidebox ul {
height:20px;
padding:0 4px;
background:rgba(0,0,0,0.5);
border-radius:8px;
}
.ck-slidebox ul li {
float:left;
height:12px;
margin:4px 4px;
}
.ck-slidebox ul li em {
width:12px;
height:12px;
cursor:pointer;
background:#fff;
border-radius:100%;
text-indent:-9999px;
display:block;
}
.ck-slidebox ul li.current em {
background:#FE6500;
}
.ck-slidebox ul li em:hover {
background:#FE6500;
}
.ck-slidebox .dot-wrap {
}
.ck-slidebox .slideWrap{
}
slide.js
;(function($){
$.fn.ckSlide = function(opts){
opts = $.extend({}, $.fn.ckSlide.opts, opts);
this.each(function(){
var slidewrap = $(this).find('.ck-slide-wrapper');
var slide = slidewrap.find('li');
var count = slide.length;
var that = this;
var index = 0;
var time = null;
$(this).data('opts', opts);
// next
$(this).find('.ck-next').on('click', function(){
if(opts['isAnimate'] == true){
return;
}
var old = index;
if(index >= count - 1){
index = 0;
}else{
index++;
}
change.call(that, index, old);
});
// prev
$(this).find('.ck-prev').on('click', function(){
if(opts['isAnimate'] == true){
return;
}
var old = index;
if(index <= 0){
index = count - 1;
}else{
index--;
}
change.call(that, index, old);
});
$(this).find('.ck-slidebox li').each(function(cindex){
$(this).on('click.slidebox', function(){
change.call(that, cindex, index);
index = cindex;
});
});
// focus clean auto play
$(this).on('mouseover', function(){
if(opts.autoPlay){
clearInterval(time);
}
$(this).find('.ctrl-slide').css({opacity:0.6});
});
// leave
$(this).on('mouseleave', function(){
if(opts.autoPlay){
startAtuoPlay();
}
$(this).find('.ctrl-slide').css({opacity:0.15});
});
startAtuoPlay();
// auto play
function startAtuoPlay(){
if(opts.autoPlay){
time = setInterval(function(){
var old = index;
if(index >= count - 1){
index = 0;
}else{
index++;
}
change.call(that, index, old);
}, 2000);
}
}
// 修正box
var box = $(this).find('.ck-slidebox');
box.css({
'margin-left':-(box.width() / 2)
})
// dir
switch(opts.dir){
case "x":
opts['width'] = $(this).width();
slidewrap.css({
'width':count * opts['width']
});
slide.css({
'float':'left',
'position':'relative'
});
slidewrap.wrap('<div class="ck-slide-dir"></div>');
slide.show();
break;
}
});
};
function change(show, hide){
var opts = $(this).data('opts');
if(opts.dir == 'x'){
var x = show * opts['width'];
$(this).find('.ck-slide-wrapper').stop().animate({'margin-left':-x}, function(){opts['isAnimate'] = false;});
opts['isAnimate'] = true
}else{
$(this).find('.ck-slide-wrapper li').eq(hide).stop().animate({opacity:0});
$(this).find('.ck-slide-wrapper li').eq(show).show().css({opacity:0}).stop().animate({opacity:1});
}
$(this).find('.ck-slidebox li').removeClass('current');
$(this).find('.ck-slidebox li').eq(show).addClass('current');
}
$.fn.ckSlide.opts = {
autoPlay: false,
dir: null,
isAnimate: false
};
})(jQuery);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/slide.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/slide.js"></script>
<style>
.ck-slide {
width:700px;
height:320px;
margin:20px auto 0 auto;
}
.ck-slide ul.ck-slide-wrapper {
height:320px;
}
</style>
</head>
<body>
<div class="ck-slide">
<ul class="ck-slide-wrapper">
<li>
<a href="javascript:;"><img src="images/1.jpg" alt="" style="width:700px;"></a>
</li>
<li style="display:none">
<a href="javascript:;"><img src="images/2.jpg" alt="" style="width:700px;"></a>
</li>
<li style="display:none">
<a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a>
</li>
<li style="display:none">
<a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a>
</li>
<li style="display:none">
<a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a>
</li>
</ul>
<a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
<a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
<div class="ck-slidebox">
<div class="slideWrap">
<ul class="dot-wrap">
<li class="current"><em>1</em></li>
<li><em>2</em></li>
<li><em>3</em></li>
<li><em>4</em></li>
<li><em>5</em></li>
</ul>
</div>
</div>
</div>
<script>
$('.ck-slide').ckSlide({
autoPlay:true
/*dir:"x"*/
});
</script>
</body>
</html>
效果图:
PS:兼容IE9+