图片轮播

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

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>

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

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

 

原文地址:https://www.cnblogs.com/Leo_wl/p/2852874.html