电子商店--图片轮播
电子商店的图片轮播功能，有以下特点
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>
美观大方就需要使用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>
其他的都很普通，也很简单了，完整的下载地址
请继续关注我们的电子商店的设计和开发，我会将实现的全过程记录下来，并通过博客分享给大家，当然最后也会把这个电子商店网站免费开源。
