电子商店——图片轮播

最新推荐文章于 2023-03-15 20:08:46 发布

langben521

最新推荐文章于 2023-03-15 20:08:46 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/langben521/article/details/8963455

版权

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

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

#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><a target="_blank"href="http://www.langben.com">

</a><a target="_blank"href="http://www.langben.com">

</a>

</div>

<ul>

</ul>

</div>

</body>

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

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

langben521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
电子商店——图片轮播

电子商店的图片轮播功能，有以下特点1. 高性能2. 美观大方3. 兼容IE 6、IE 8+和Firefox 3+等浏览器4. 总体积要小（除图片外）3k5. js简单易懂（40行）首先让我们看一下效果高性能是我们首先需要考虑的图片轮播的功能实现思路：客户首先看到第一张图片，这样就需要首先加载第一张图片，背后的第二张和第三张在背后隐藏，但是最后还是要用到，这样
复制链接

扫一扫