是图片 摆好DIV框
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网站空间、营销软件、网站建设、辽中网站维护、网站推广。
简单的就是中间DIV是放个img，切换的时候替换
体验好一点的就是div里面放ul li里面放上所有图片
无缝滚动就把ul left或者right移动 水平放置li 溢出的隐藏 判断是否首尾，然后重置或者不动这个应该不用说了
首先要定义一个索引来表示你当前轮播到第几张图片了
然后获得你总共有几张图片 当索引跳到最后一张的时候 将其值改为0 即可
对于上一页下一页 逻辑与上面相同
如果当前索引为0 或者为最后一个隐藏掉这个按钮或者赋值另一端的极值
轮播的话 写一个定时器 第一个参数就是这个函数啦 第二个参数给1000（ms）
函数里面就对这个index按上面的逻辑操作即可了
思路给你了 自己写吧。。边查边写 收获会很大
建议，在当前轮播图的div添加类active，设置.active {display：block；}，.ban{display:none;};这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === 0 ) {//当前为第一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === ($(".ban").length-1) ) {//当前为最后一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了
试一下outline:none;
这个可以去掉表单标签点击时带边框的问题
//我项目里面的轮播，可以参考。
!DOCTYPE html
html
meta charset="utf-8" /
title/title
t
script type="text/javascript" src="js/slider.js"/script
script type="text/javascript" src="js/jquery-1.9.1.min.js"/script
body
div id="banner_tabs" class="flexslider"
ul class="slides"
li
a
img width="1920" height="600" style="background: url(images/banner_1.jpg) no-repeat center;" src="images/alpha.png"
/a
/li
li
a
img width="1920" height="600" style="background: url(images/banner_2.jpg) no-repeat center;" src="images/alpha.png"
/a
/li
li
a
img width="1920" height="600" style="background: url(images/banner_3.jpg) no-repeat center;" src="images/alpha.png"
/a
/li
/ul
ul class="flex-direction-nav"
lia class="flex-prev" href="javascript:;"Previous/a/li
lia class="flex-next" href="javascript:;"Next/a/li
/ul
ol id="bannerCtrl" class="flex-control-nav flex-control-paging"
li class="active"a1/a/li
li class=""a2/a/li
li class=""a3/a/li
/ol
/div
script src="js/jquery.js"/script
script type="text/javascript"
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto:true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
});//前一页
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
});//下一页
})
/script
/body
/html
==========================================
下载slider，引入jq，看看slider教程，对这些有点了解。
