电子商店的图片轮播功能,有以下特点
1. 高性能
2. 美观大方
3. 兼容IE 6、IE 8+和Firefox 3+等浏览器
4. 总体积要小(除图片外)3k
5. js简单易懂(40行)
首先让我们看一下效果
高性能是我们首先需要考虑的
图片轮播的功能实现思路:客户首先看到第一张图片,这样就需要首先加载第一张图片,背后的第二张和第三张在背后隐藏,但是最后还是要用到,这样,就可以在页面完全加载成功后(window.onload),使用延迟加载图片的功能实现。
图片由二级域名提供,这样就可以并行加载图片。
View Code
<scripttype="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;
}
#div1ul
{
list-style: none;
position: absolute;
top: 380px;
left: 760px;
}
#div1li
{
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;
}
#sliderimg
{
float: left;
border: none;
}
</style>
HTML部分
<body>
<divid="div1">
<divid="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>
其他的都很普通,也很简单了,完整的下载地址
请继续关注我们的电子商店的设计和开发,我会将实现的全过程记录下来,并通过博客分享给大家,当然最后也会把这个电子商店网站免费开源。