基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

<div id="hwslider"> 
<ul> 
<li class="active"><a href="#"><img src="images/s1.jpg" alt="1"></a></li> 
<li><a href="#"><img src="images/s2.jpg" alt="2"></a></li> 
<li>Helloweba</li> 
</ul> 
<div id="dots"> 
<span data-index="1" class="active"></span> 
<span data-index="2"></span> 
<span data-index="3"></span> 
</div> 
<a href="javascript:;" id="prev" class="arr"><</a> 
<a href="javascript:;" id="next" class="arr">></a> 
</div>

#hwslider{width: 600px;height: 320px;margin:40px auto; position: relative; overflow: hidden;} 
#hwslider ul{width: 600px; height: 320px; position: absolute; z-index: 1} 
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 600px;height: 320px; overflow: hidden;} 
#hwslider ul li.active{display: block;} 
#dots{position: absolute; bottom:20px; left:270px; width: 60px; height: 12px; z-index: 2;} 
#dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;} 
#dots span.active{background: orangered} 
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none} 
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;} 
#hwslider:hover .arr{display: block; text-decoration: none;color: #fff} 
#prev{left: 20px} 
#next{right: 20px}

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/hwslider.js"></script>

$(function(){ 
var slider = $("#hwslider"); 
var dots = $("#dots span"), 
prev = $("#prev"),next = $("#next"); 
var sliderInder = slider.children('ul') 
var hwsliderLi = sliderInder.children('li'); 
var hwsliderSize = hwsliderLi.length; //滑块的总个数 
var index = 1; //初始显示第一个滑块 
var speed = 400; //滑动速度 
var interval = 3000; //间隔时间 
var autoPlay = false; //是否支持自动滑动 
var clickable = true; //是否已经点击了滑块在做滑动动画 
});

var moveTo = function(index,dir){ 
if(clickable){ 
clickable = false; 
//位移距离 
var offset = slider.width(); 
if(dir == 'prev'){ 
offset = -1*offset; 
} 
//当前滑块动画 
sliderInder.children('.active').stop().animate({ 
left: -offset}, 
speed, 
function() { 
$(this).removeClass('active'); 
}); 
//下一个滑块动画 
hwsliderLi.eq(index-1).css('left', offset + 'px').addClass('active').stop().animate({ 
left: 0}, 
speed, 
function(){ 
clickable = true; 
}); 
dots.removeClass('active'); 
dots.eq(index-1).addClass('active'); 
}else{ 
return false; 
} 
}

next.on('click', function(event) { 
event.preventDefault(); 
if(clickable){ 
if(index >= hwsliderSize){ 
index = 1; 
}else{ 
index += 1; 
} 
moveTo(index,'next'); 
} 
}); 
prev.on('click', function(event) { 
event.preventDefault(); 
if(clickable){ 
if(index == 1){ 
index = hwsliderSize; 
}else{ 
index -= 1; 
} 
moveTo(index,'prev'); 
} 
});

dots.on('click', function(event) { 
event.preventDefault(); 
if(clickable){ 
var dotIndex = $(this).data('index'); 
if(dotIndex > index){ 
dir = 'next'; 
}else{ 
dir = 'prev'; 
} 
if(dotIndex != index){ 
index = dotIndex; 
moveTo(index, dir); 
} 
} 
});

if(autoPlay){ 
var timer; 
var play = function(){ 
index++; 
if(index > hwsliderSize){ 
index = 1; 
} 
moveTo(index, 'next'); 
} 
timer = setInterval(play, interval); //设置定时器 
//鼠标滑上时暂停 
slider.hover(function() { 
timer = clearInterval(timer); 
}, function() { 
timer = setInterval(play, interval); 
}); 
};