网页制作过程中少不了轮播图的使用,为了使banner图在不同分辨率的屏幕上都能通屏显示,我们会把banner图做成2000像素的宽度。
一般将banner写成如下结构:
为了让banner图左右居中显示,我们可以给
那么,为了解决这种情况的发生,我们采用另一种更为合适的方法。这需要将banner写成如下结构:
利用背景图的方式将图片嵌入,通过设置背景图片居中就可以简单解决,同时需要注意的是必须给包含该背景属性的
加宽高属性,否则背景图片将无法正常显示。给上述.banner{ height:490px;}
.banner li{ height:490px; width:100%; position:absolute; top:223px;}
.banner .ctrl{ position:absolute; top:690px; left:50%;}
.banner .ctrl p{ width:8px; height:8px; border-radius:50%; border:1px solid black; float:left; margin-right:7px;}
.banner .ctrl .cur{ width:10px; height:10px; border:none; background-color:#00ad3e;}
以上样式属性的高度值、定位中的top值、控制按钮的样式等可根据实际情况自行修改。另外,我们要引入一个在线的开放的js函数库开做切换效果,引入语句如下:
要真正实现轮播效果,还需要以下语句:
$(".banner li").hide().first().show();
$(".banner .ctrl p").first().addClass("cur");
var n=0; //存储轮播图的索引值
function change(){ //定义循环播放的函数
n++;
if(n>3) n=0; //当图片显示到最后一张时,从头开始
$(".banner li").fadeOut(1000).eq(n).fadeIn(1000);//当前要显示的图片渐显,其他图片渐隐
$(".banner .ctrl p").removeClass("cur").eq(n).addClass("cur"); //当前控制块高亮,其他控制块复原
}
var timer=setInterval(change,5000); //设置图片切换速度为每5秒切换一次
$(".banner .ctrl p").mouseenter( //定义鼠标移入控制块进行的操作
function(){
n=$(this).index();
clearInterval(timer); //清除定时
$(this).addClass("cur").siblings().removeClass("cur"); //当前控制块高亮,其他控制块复原
$(".banner li").fadeOut(1000).eq(n).fadeIn(1000);
}
).mouseleave( //定义鼠标移出控制块进行的操作
function(){
timer=setInterval(change,5000); //开启定时
}
);