很多新闻网页里面都有图片切换的效果,今天写了一个简单的。
图片新闻切换
#Container{width:400px;height:300px;background:red;margin:0 auto;z-index:1}
#top{width:400px;height:260px;margin:0 auto;z-index:999}
#bottom{width:400px;height:40px;margin:0 auto;z-index:999;position:absolute;top:260;left:0}
#DemoPic{width:400px;height:300px;z-index:1;position:absolute;}
.BtnStyle {width:28px;height:28px;background:green;float:right;margin:2px 2px auto;z-index:999;}
.BtnStyleFocus{width:28px;height:28px;background:red;float:right;margin:2px 2px auto;z-index:999;border-width:4;border-style:solid;border-color:white;}
var PicSrc={};//定义图像数组用于存储切换的图像
var PicLink={};//定义点击图像的链接地址
PicSrc[0]="1.jpg";
PicLink[0]="http://www.51cto.com";
PicSrc[1]="2.jpg";
PicLink[1]="http://blog.51cto.com";
PicSrc[2]="3.jpg";
PicLink[2]="http://developer.51cto.com";
PicSrc[3]="4.jpg";
PicLink[3]="http://database.51cto.com";
PicSrc[4]="5.jpg";
PicLink[4]="http://mobile.51cto.com";
CurrentID=0;
var TimerID;
function SwitchPic(PicSrcID){
document.getElementById("DemoPic").src=PicSrc[PicSrcID];//切换的源图像
document.getElementById("PicLinkAddr").href=PicLink[PicSrcID];//图像的点击链接
CurrentID=PicSrcID;//设置当前的ID
for(i=0;i
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?