网站建设技术干货之使用轮播图
1、一般来说：在网站banner（广告）的位置会放置一个轮播图，实现图片自动切换的动态网页效果。实现轮播图的方法比较多，可以用jQuery或javaScript实现，也可以用前端框架bootstrap实现。实现效果的代码比较成熟，不需要我们自己写，只需要把现成的代码改造一下就可以了。
下面我们就用CSS+div和jQuery快速实现轮播图的效果，总的说来需要3步，第1步复制粘粘html结构，第2步引入编辑好的CSS样式，第3步引入编辑好的jQuery文件即可。
先看整体效果：
2、具体步骤如下：
将html结构代码复制粘贴到需要放置轮播图的位置，比如主导航栏的下面。html结构代码如下：
3、把控制轮播图的CSS样式文件引入到当前网页的head标签中，引入代码为：
<link rel="stylesheet" type="text/css" href="css/ban2.css"/>
ban2.css样式文件的代码如下：
4、把控制轮播图的jQuery文件引入到当前网页的body标签结束之前，引入代码为：
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/ban2.js"></script>
先引入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<0){i=boxleng-1};
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;
})
})
至此，案例制作完成，希望对大家网站建设的学习有所帮助。