JS图片切换,带缩略图版

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 03:07 点击:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<HTML xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

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

<title>五屏带缩略图幻灯片切换代码</title> 

<style> 

BODY {  

    FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2  

}  

A {  

    TEXT-DECORATION: none  

}  

A:link {  

    COLOR: #505050; color1: #54564c  

}  

A:visited {  

    COLOR: #505050; color1: #54564c  

}  

A:hover {  

    COLOR: #d40005; TEXT-DECORATION: underline  

}  

A:active {  

    COLOR: #f30  

}  

IMG {  

    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px  

}  

.box {  

    FLOAT: left; WIDTH: 472px  

}  

.box .boxpadding {  

    PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px  

}  

#Slide {  

    CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px  

}  

#Slide A {  

    COLOR: #000  

}  

.img {  

    BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center  

}  

.boxpadding {  

    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid  

}  

 

.thumb_title {  

    MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3  

}  

#Slide_Thumb {  

    MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute  

}  

.thumb_on {  

    DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer  

}  

.thumb_off {  

    DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer  

}  

.thumb_off {  

    FILTER: alpha(opacity=50); -moz-opacity: 0.5  

}  

.thumb_on {  

    FILTER: alpha(opacity=100); -moz-opacity: 1  

}  

.thumb_off IMG {  

    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px  

}  

.thumb_on IMG {  

 &n

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1