如何实现 不同尺寸通屏轮播图的居中显示?

 网页制作 过程中少不了轮播图的使用,为了使banner图在不同 分辨率的屏幕上都能通屏显示,我们会把banner图做成2000像素的宽度。

一般将banner写成如下结构:

<ul>

    <li><img src=/html/"images/banner1.jpg>

    <li><img src=/html/"images/banner2.jpg>

    <li><img src=/html/"images/banner3.jpg>

</ul>

为了让banner图左右居中显示,我们可以给<ul></ul>加绝对定位,设置属性{ left:50%; margin-left:600px;}。600px是图片宽度的一半,如果图片宽度有变化,应对照修改数值。这种情况下,当我们应 用时会发现这个方法是存在问题的,由于屏幕宽度不够,浏览器的 窗口会出现横向的滚动条,这样做会 导致用户体验很不好。

那么,为了解决 这种情况的发生,我们采用 另一种更为合适的方法。这需要将banner写成如下结构:

<ul>

         <li style="background:url(/html/images/banner1.jpg) no-repeat center 0"></li>

    <li style="background:url(/html/images/banner2.jpg) no-repeat center 0"></li>

    <li style="background:url(/html/images/banner3.jpg) no-repeat center 0"></li>

    <li style="background:url(/html/images/banner4.jpg) no-repeat center 0"></li>

    <div>

             <p></p><p></p><p></p><p></p>

    </div>

</ul>

利用背景 图的方式将图片嵌入,通过设置 背景图片居中就可以简单解决,同时需要 注意的是必须给包含该背景属性的<li></li>加宽高属性,否则背景 图片将无法正常显示。给上述<ul></ul>加以下样式属性:

.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函数库开做切换效果,引入语句如下:

<script src=/html/"http_/libs.baidu.com/jquery/1.9.0/jquery.js"></script>_/p/index.html>

要真正实现轮播效果,还需要以下语句:

<script>

$(".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); //开启定时

         }

);

</script>

关键词:
返回列表

相关文章

相关案例

友情链接:    uc彩游戏-首页   9188彩票---首页_欢迎您   彩客网---首页_欢迎您   彩票开户注册   长江彩票_信誉平台