图片轮播

电子商店的图片轮播功能，有以下特点

1. 高性能

2. 美观大方

3. 兼容IE 6、IE 8+和Firefox 3+等浏览器

4. 总体积要小（除图片外）3k

5. js简单易懂（40行）

首先让我们看一下效果：

高性能是我们首先需要考虑的

图片轮播的功能实现思路：客户首先看到第一张图片，这样就需要首先加载第一张图片，背后的第二张和第三张在背后隐藏，但是最后还是要用到，这样，就可以在页面完全加载成功后（window.onload），使用延迟加载图片的功能实现。

图片由二级域名提供，这样就可以并行加载图片。

View Code

美观大方就需要使用CSS来优化了

CSS静态滤镜样式 filter和不透明度opacity ，将轮播的编号123设计成半透明的效果，能CSS实现的，就不要使用图片，这也符合我们高性能的原则。

View Code

 <style type="text/css">
        #div1
         { 
            height :  430px ; 
            width :  960px ; 
            overflow :  hidden ; 
            position :  relative ; 
            overflow :  hidden ;
        } 
        #div1 ul
         { 
            list-style :  none ; 
            position :  absolute ; 
            top :  380px ; 
            left :  760px ;
        } 
        #div1 li
         { 
            opacity :  .3 ; 
            filter :  alpha(opacity=30) ; 
            text-align :  center ; 
            line-height :  30px ; 
            font-size :  20px ; 
            height :  30px ; 
            width :  30px ; 
            background-color :  #ffffff ; 
            float :  left ;
        } 
        #slider
         { 
            position :  absolute ; 
            top :  0px ; 
            left :  0px ;
        } 
        #slider img
         { 
            float :  left ; 
            border :  none ;
        } 
    </style>

HTML部分

View Code

 <body>
    <div id="div1">
        <div id="slider">
            <a target="_blank" href="http://www.langben.com">
                <img src="langben.JPG" />
            </a><a target="_blank" href="http://www.langben.com">
                <img id="second" />
            </a><a target="_blank" href="http://www.langben.com">
                <img id="third" />
            </a>
        </div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

其他的都很普通，也很简单了，完整的下载地址

请继续关注我们的电子商店的设计和开发，我会将实现的全过程记录下来，并通过博客分享给大家，当然最后也会把这个电子商店网站免费开源。

作者： Leo_wl

出处： http://www.cnblogs.com/Leo_wl/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于图片轮播的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did47260

更新时间：2022-09-24 阅读：46次