一般来说：在网站banner（广告）的位置会放置一个轮播图，实现图片自动切换的动态网页效果。实现轮播图的方法比较多，可以用jquery或javascript实现，也可以用前端框架bootstrap实现。实现效果的代码比较成熟，不需要我们自己写，只需要把现成的代码改造一下就可以了。
下面我们就用css+p和jquery快速实现轮播图的效果，总的说来需要3步，第1步复制粘粘html结构，第2步引入编辑好的css样式，第3步引入编辑好的jquery文件即可。
先看整体效果：
具体步骤如下：
1.将html结构代码复制粘贴到需要放置轮播图的位置，比如主导航栏的下面。html结构代码如下：
2.把控制轮播图的css样式文件引入到当前网页的head标签中，引入代码为：
ban2.css样式文件的代码如下：
3. 把控制轮播图的jquery文件引入到当前网页的body标签结束之前，引入代码为：
先引入jquery库文件，然后引入编写的jquery文件ban2.js。ban2.js的代码如下：
$(function(){
var i,left,right,box,boxli,boxleng,width,dot,first,last,isauto;
i = 0;
left = $(.homeleft);
right = $(.homeright);
box = $(.homebanner ul);
boxli = $(.homebanner li);
dotbox = $(.homedot);
dot = $(.homedot).find(a);
width = boxli.width();
boxleng = boxli.length;
box.css({width:width*(boxleng)})
boxli.css({width:width});
dot.eq(0).addclass(cur);
boxli.eq(0).addclass(cur);
boxli.each(function(index) {
zindex = boxleng-(index+1);
$(this).css({z-index:zindex})
});
isauto = true;
left.click(function(){
if(box.is(:animated)){return}
i--;
if(i
boxanimate();
})
right.click(function(){
if(box.is(:animated)){return}
i++;
boxanimate();
})
function boxanimate(){
if(i>boxleng-1){i=0}
boxli.addclass(cur1);
settimeout(function(){
boxli.removeclass(cur1);
boxli.removeclass(cur).eq(i).addclass(cur);
boxli.stop().animate({opacity:0,z-index:1},500).eq(i).stop().animate({opacity:1,z-index:boxleng},500);
bannerdot(i)
},400)
}
function bannerdot(i){
if(i>boxleng-1){i=0}
dot.removeclass(cur).eq(i).addclass(cur);
}
dot.click(function(){
i = $(this).index();
bannerdot(i);
boxanimate(i);
})
setinterval(function(){
if(isauto){
i++;
boxanimate();
bannerdot(i)
}
},3000)
box.hover(function(){
isauto = false;
},function(){
isauto = true;
})
dotbox.hover(function(){
isauto = false;
},function(){
isauto = true;
})
left.hover(function(){
isauto = false;
},function(){
isauto = true;
})
right.hover(function(){
isauto = false;
},function(){
isauto = true;
})
})
至此，案例制作完成，希望对大家网站建设的学习有所帮助。