电子商店——图片轮播

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

1. 高性能

2. 美观大方

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

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

5. js简单易懂（40行）

首先让我们看一下效果

                       

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

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

 

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

View Code

  <script type="text/javascript">

 

        window.onload = function () {

            flag = 0;

            obj1 = document.getElementById("slider");

            obj2 = document.getElementsByTagName("li");

            obj2[0].style.backgroundColor = "#666666";

            time = setInterval("turn();", 7000);

 

            obj1.onmouseover = function () {

                clearInterval(time);

            }

            obj1.onmouseout = function () {

                time = setInterval("turn();", 8000);

            }

 

            for (var num = 0; num < obj2.length; num++) {

                obj2[num].onmouseover = function () {

                    turn(this.innerHTML);

                    clearInterval(time);

                }

                obj2[num].onmouseout = function () {

                    time = setInterval("turn();", 8000);

                }

            }

            //延迟加载图片，演示的时候，使用本地图片，上线后请改为二级域名提供的图片地址

            document.getElementById("second").src = "langben2.JPG";

            document.getElementById("third").src = "langben3.JPG";

 

        }

 

        function turn(value) {

            if (value != null) {

                flag = value - 2;

            }

            if (flag < obj2.length - 1)

                flag++;

            else

                flag = 0;

            obj1.style.top = flag * (-430) + "px";

            for (var j = 0; j < obj2.length; j++) {

                obj2[j].style.backgroundColor = "#ffffff";

            }

            obj2[flag].style.backgroundColor = "#666666";

        }

   

    </script>
View Code

 

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

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

 1 View Code
 2 
 3  
 4 
 5 <style type="text/css">
 6 
 7         #div1
 8 
 9         {
10 
11             height: 430px;
12 
13             width: 960px;
14 
15             overflow: hidden;
16 
17             position: relative;
18 
19             overflow: hidden;
20 
21         }
22 
23         #div1 ul
24 
25         {
26 
27             list-style: none;
28 
29             position: absolute;
30 
31             top: 380px;
32 
33             left: 760px;
34 
35         }
36 
37         #div1 li
38 
39         {
40 
41             opacity: .3;
42 
43             filter: alpha(opacity=30);
44 
45             text-align: center;
46 
47             line-height: 30px;
48 
49             font-size: 20px;
50 
51             height: 30px;
52 
53             width: 30px;
54 
55             background-color: #ffffff;
56 
57             float: left;
58 
59         }
60 
61         #slider
62 
63         {
64 
65             position: absolute;
66 
67             top: 0px;
68 
69             left: 0px;
70 
71         }
72 
73         #slider img
74 
75         {
76 
77             float: left;
78 
79             border: none;
80 
81         }
82 
83     </style>
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>
html部分

 

　

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

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

 

posted on 2013-05-23 09:12  阿里郎127  阅读(132)  评论(0)    收藏  举报

导航