电子商店--图片轮播

http://blog.youkuaiyun.com/langbencom/article/details/8484820

电子商店--图片轮播

分类： 狼奔 2013-01-09 11:32 453人阅读 评论(0) 收藏 举报

狼奔

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

1. 高性能

2. 美观大方

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

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

5. js简单易懂（40行）

首先让我们看一下效果：

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

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

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

[javascript] view plain copy print ?

1. <script type="text/javascript">
3. window.onload = function () {
4. flag = 0;
5. obj1 = document.getElementById("slider");
6. obj2 = document.getElementsByTagName("li");
7. obj2[0].style.backgroundColor = "#666666";
8. time = setInterval("turn();", 7000);
10. obj1.onmouseover = function () {
11. clearInterval(time);
12. }
13. obj1.onmouseout = function () {
14. time = setInterval("turn();", 8000);
15. }
17. for (var num = 0; num < obj2.length; num++) {
18. obj2[num].onmouseover = function () {
19. turn(this.innerHTML);
20. clearInterval(time);
21. }
22. obj2[num].onmouseout = function () {
23. time = setInterval("turn();", 8000);
24. }
25. }
26. //延迟加载图片，演示的时候，使用本地图片，上线后请改为二级域名提供的图片地址
27. document.getElementById("second").src = "langben2.JPG";
28. document.getElementById("third").src = "langben3.JPG";
30. }
32. function turn(value) {
33. if (value != null) {
34. flag = value - 2;
35. }
36. if (flag < obj2.length - 1)
37. flag++;
38. else
39. flag = 0;
40. obj1.style.top = flag * (-430) + "px";
41. for (var j = 0; j < obj2.length; j++) {
42. obj2[j].style.backgroundColor = "#ffffff";
43. }
44. obj2[flag].style.backgroundColor = "#666666";
45. }
47. </script>

    <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>

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

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

[css] view plain copy print ?

1. <style type="text/css">
2. #div1
3. {
4. height: 430px;
5. width: 960px;
6. overflow: hidden;
7. position: relative;
8. overflow: hidden;
9. }
10. #div1 ul
11. {
12. list-style: none;
13. position: absolute;
14. top: 380px;
15. left: 760px;
16. }
17. #div1 li
18. {
19. opacity: .3;
20. filter: alpha(opacity=30);
21. text-align: center;
22. line-height: 30px;
23. font-size: 20px;
24. height: 30px;
25. width: 30px;
26. background-color: #ffffff;
27. float: left;
28. }
29. #slider
30. {
31. position: absolute;
32. top: 0px;
33. left: 0px;
34. }
35. #slider img
36. {
37. float: left;
38. border: none;
39. }
40. </style>

<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部分

[html] view plain copy print ?

1. <body>
2. <div id="div1">
3. <div id="slider">
4. <a target="_blank" href="http://www.langben.com">
5. <img src="langben.JPG" />
6. </a><a target="_blank" href="http://www.langben.com">
7. <img id="second" />
8. </a><a target="_blank" href="http://www.langben.com">
9. <img id="third" />
10. </a>
11. </div>
12. <ul>
13. <li>1</li>
14. <li>2</li>
15. <li>3</li>
16. </ul>
17. </div>
18. </body>

<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>

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

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