<html>
<head>
<title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; COLOR: #f6f6ee; MARGIN-RIGHT: auto; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 490px; TEXT-ALIGN: center
}
A {
 COLOR: #fff; TEXT-DECORATION: none
}
A:hover {
 COLOR: #fff; TEXT-DECORATION: underline
}
.fpic {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 3; BACKGROUND: #000;  BORDER-BOTTOM-WIDTH: 0px; WIDTH: 476px; POSITION: relative; HEIGHT: 330px; BORDER-RIGHT-WIDTH: 0px;BORDER: #dddddd 1px solid;
text-align:center
}
.bpic {
 FLOAT: left; MARGIN: 0px; WIDTH: 244px; POSITION: relative; HEIGHT: 243px
}
#focpic {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 1px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 1px; BORDER-RIGHT-WIDTH: 0px
}
.thubpic {
 PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
}
.thubpiccur {
 PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
}
.thubpiccur {
 Z-INDEX: 30; BACKGROUND: url() no-repeat left 50%
}
.thubpic IMG {
 BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
}
.thubpiccur IMG {
 BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
}
.thubpiccur IMG {
 BORDER-LEFT-COLOR: #fff; BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BORDER-RIGHT-COLOR: #fff
}
-->
</style>
</head>
<body>
<SCRIPT language=javascript>
//all by www.qpsh.com
var currslid = 0;
var slidint;
function setfoc(id){
 document.getElementById("focpic").src = picarry[id];
 document.getElementById("foclnk").href = lnkarry[id];
 document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
 currslid = id;
 for(i=0;i<6;i++){
  document.getElementById("tmb"+i).className = "thubpic";
 };
 document.getElementById("tmb"+id).className ="thubpiccur";
 focpic.style.visibility = "hidden";
 focpic.filters[0].Apply();
 if (focpic.style.visibility == "visible") {
  focpic.style.visibility = "hidden";
  focpic.filters.revealTrans.transition=23;
 }
 else {
  focpic.style.visibility = "visible";
  focpic.filters[0].transition=23;
 }
 focpic.filters[0].Play();
 stopit();
}

function playnext(){
 if(currslid==5){
  currslid = 0;
 }
 else{
  currslid++;
 };
 setfoc(currslid);
 playit();
}
function playit(){
 slidint = setTimeout(playnext,4500);
}
function stopit(){
 clearTimeout(slidint);
 }
window.onload = function(){
 playit();
}
</SCRIPT>
</head>

<body>
<DIV class=fpic>
<A id=foclnk href="#nogo" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=300 alt="" src="http://www.csrcode.cn/images/m01.jpg" width=400></A> 
<DIV id=fttltxt 
style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><A 
href="#nogo" target=_blank>红叶传情</A></DIV>
<DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">
<DIV class=thubpiccur id=tmb0 οnmοuseοver=setfoc(0); οnmοuseοut=playit();><A 
href="#nogo" target=_blank><IMG 
src="http://www.csrcode.cn/images/s1.jpg" alt="" width=56 height=42 border="0"></A></DIV>
<DIV class=thubpic id=tmb1 οnmοuseοver=setfoc(1); οnmοuseοut=playit();><A 
href="#nogo" target=_blank><IMG height=45 alt="" 
src="http://www.csrcode.cn/images/s2.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb2 οnmοuseοver=setfoc(2); οnmοuseοut=playit();><A 
href="#nogo" target=_blank><IMG height=45 alt="" 
src="http://www.csrcode.cn/images/s3.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb3 οnmοuseοver=setfoc(3); οnmοuseοut=playit();><A 
href="#nogo" target=_blank><IMG height=45 alt="" 
src="http://www.csrcode.cn/images/s4.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb4 οnmοuseοver=setfoc(4); οnmοuseοut=playit();><A 
href="#nogo" target=_blank><IMG height=45 alt="" 
src="http://www.csrcode.cn/images/s5.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb5 οnmοuseοver=setfoc(5); οnmοuseοut=playit();><A 
href="#nogo" target=_blank><IMG height=45 alt="" 
src="http://www.csrcode.cn/images/s6.jpg" width=56></A></DIV>
<SCRIPT language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "http://www.csrcode.cn/images/m01.jpg";
lnkarry[0]  = "#nogo";
ttlarry[0] = "红叶传情";
picarry[1] = "http://www.csrcode.cn/images/m02.jpg";
lnkarry[1]  = "#nogo";
ttlarry[1] = "野花绽放";
picarry[2] = "http://www.csrcode.cn/images/m03.jpg";
lnkarry[2]  = "#nogo";
ttlarry[2] = "往事如茶";
picarry[3] = "http://www.csrcode.cn/images/m04.jpg";
lnkarry[3]  = "#nogo";
ttlarry[3] = "油菜花开";
picarry[4] = "http://www.csrcode.cn/images/m05.jpg";
lnkarry[4]  = "#nogo";
ttlarry[4] = "玫瑰情思1";
picarry[5] = "http://www.csrcode.cn/images/m06.jpg";
lnkarry[5]  = "#nogo";
ttlarry[5] = "玫瑰情思2";
</SCRIPT>
</DIV></DIV>
</body>
</html>

<br><br><hr><p align="center"><font color=skyblue>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/23/2652833.html

CSS+JS带缩略图随机切换方式的图片切换效果相关推荐

  1. html轮播带缩略图,js带缩略图的图片轮播效果代码分享

    本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...

  2. HTML+CSS+JS实现网页随机点名

    HTML+CSS+JS实现网页随机点名 大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...

  3. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  4. html+css+js实现关键词随机图片

    目录 前言 如何实现? 前端页面 php接口 总结 电脑为配置php环境怎么办? 写在最后 前言 前几天我花了一下午的时间搭建好了个人主页,大家可以去看一下->>>皮小孩的个人主页 ...

  5. html 图片自动切换插件,jquery图片切换插件

    /** * 图片切换插件 * Dependence jquery-1.7.2.min.js **/ (function ($) { //调用方式 $('#silder').imgSilder({s_w ...

  6. Javascript 仿Flash 图片切换 及 Flash 图片切换

    1. Javascript 仿Flash 图片切换 http://www.fansart.com/cweb/200669141456.asp <a target=_self href=" ...

  7. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果] 近来不忙,就仔细的看了一看 看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证. 读码就要读比较全面的,读像是原著的代码 ...

  8. html 折叠焦点图切换,jQuery层叠式图片切换焦点图插件

    本文作者html5tricks,转载请注明出处 之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件,主要是针对文字的层叠式切换.今天要介绍的也是一款层叠式切换插件,不过它是一款 下面我们一起 ...

  9. html图片靠右浮动 文字左侧环绕,CSS实现模拟float: center文字左右环绕图片的效果...

    什么是文字左右环绕图片?就是下图的效果: 效果的CSS代码可以点击这里查看 在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果. 经常会有小伙伴问:有f ...

最新文章

  1. 黑色星期五，外区亚马逊技嘉 GTX 1080 折合约3870元人民币
  2. 关于IOS给我的启发
  3. Server2003PDC迁移到Server2008R2BDC
  4. vim 与系统剪切板
  5. linux qt 5移植,Qt 5.13支持处理Lottie文件，可以方便地进行移植
  6. 全面讲解Python列表数组(三)列表数组类型的内置函数方法
  7. 笔记-信息系统开发基础-面向对象基本概念-汇总
  8. Spring的使用步骤
  9. 闪回的用途与实战(闪回表，闪回删除，闪回重名删除，闪回版本查询)
  10. 西安工业大学计算机专业好吗,西安工业大学(专业学位)计算机技术考研难吗
  11. Java大数据你该学哪个
  12. 二叉树中是否存在节点和为指定值的路径
  13. srgan要训练多久_有氧运动要多久才开始消耗脂肪？
  14. 哥德巴赫猜想（C++证明）
  15. 配置git mergetool不产生*.orig文件
  16. html页面百度分享代码,使用百度分享api实现网页分享功能代码
  17. Only one expression can be specified in the select list when the subquery is not introduced with EXI
  18. 问题 J: 机器人足球
  19. socket本地通信
  20. 程序员，停止你的焦虑

热门文章

  1. 2022-2027年中国生鲜超市行业市场全景评估及发展战略规划报告
  2. 使用b2DebugDraw
  3. 支持各大运营商就是全网通？几分钟时间，让你知道什么是全网通
  4. 基于springboot的中小型医院门诊药品药库缴费网站(mysql)-JAVA.VUE【数据库设计、论文、源码、开题报告】
  5. Java常见面试题_2016
  6. 光学仿真案例(8)基于玻璃-银-空气平板的表面等离子体共振仿真模拟
  7. 瓦刀发布，必属精品：Domino评审、表决系统V2.0
  8. Android--Notification横幅通知栏
  9. 基于人工智能深度学习技术的高速公路路段安全指数分析与预测
  10. 小白自学python的编程之路——实现进制数转换（十进制和二进制和八进制的转换）