[经验分享] JS单张图片实现竖直平滑的4屏图片切换效果

[复制链接]

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:09:38 |只看该作者 |倒序浏览

一款竖直的、平滑滚动的图片切换效果，本代码没有借用jQuery框架，但是实现的效果还是不错的，点击左下角的小数字，即可滚动至对应图片，是CSS技术与JavaScript技术的结合，特别是用CSS定位图片位置方面。
　　提醒您注意的是：本文只使用了一张图片，利用JS和CSS技术进行了图片分割，看上去好像是四张图片一样，推荐大家学习。
　　示例：
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>单张图片实现的4屏焦点图切换</title>

</head>

<body>

<style type="text/css">

#Pics{width:233px;height:350px;overflow:hidden;position:relative;}

#Focuspic{position:absolute;left:0;}

</style>

<div id="Focus">

<div id="

ics"><img src="/uploads/allimg/1112/veryhuo_com_4p.jpg" id="Focuspic" /></div>

<div id="menu">

<a href="javascript:void(0)" onclick="menu(0)">1</a>

<a href="javascript:void(0)" onclick="menu(1)">2</a>

<a href="javascript:void(0)" onclick="menu(2)">3</a>

<a href="javascript:void(0)" onclick="menu(3)">4</a>

</div>

</div>

<script>

var $ = function(id){

return 'string' == typeof id ?document.getElementById(id):id;

}

var Pics = $('Pics');

var Focuspic = $('Focuspic');

var menus = $('menu');

var list = menus.getElementsByTagName('a');

Focuspic.style.left = "0px";

xpos = parseInt(Focuspic.style.left);

function move(){

if((x-xpos)>0) xpos+=Math.ceil((x-xpos) / 10);

else xpos+=Math.floor((x-xpos) / 10);

Focuspic.style.left = -xpos + 'px'

}

function menu(num){

if(num==num){

x=num*233;

}

setInterval("move()",30);

clearInterval(sauto);

}

$('Focus').onmouseover = function() {

clearInterval(sauto);

}

$('Focus').onmouseout = function() {

sauto = setInterval('automenu()',3000);

}

var num = 0;

function automenu(){

if(num==num){

num++;

x=num*233;

}

if(num==3)num=-1;

setInterval("move()",30);

}

sauto = setInterval('automenu()',3000);

</script>

</body>

</html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43728.html