纯js的图文切换效果

最新推荐文章于 2024-10-19 12:17:19 发布
最新推荐文章于 2024-10-19 12:17:19 发布 · 117 阅读 · 0
文章标签：

#J# #Flash #HTML #Google #Microsoft

<iframe name="google_ads_frame" marginwidth="0" marginheight="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4490194096475053&amp;dt=1224297623375&amp;lmt=1218843628&amp;prev_slotnames=1891601125&amp;output=html&amp;slotname=3685991503&amp;correlator=1224297623250&amp;url=http%3A%2F%2Fwww.corange.cn%2Farchives%2F2008%2F07%2F1355.html&amp;ea=0&amp;ref=http%3A%2F%2Fwww.corange.cn%2Fhtml%2Fcorange__61.html&amp;frm=0&amp;ga_vid=74227660.1224293188&amp;ga_sid=1224297597&amp;ga_hid=774239708&amp;ga_fc=true&amp;flash=9.0.124.0&amp;u_h=768&amp;u_w=1024&amp;u_ah=715&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_java=true" frameborder="0" width="300" scrolling="no" height="250" allowtransparency></iframe> <html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>标题1</title>
<style>
*{padding:0px;MARGIN:0px;
}
#shou_listulli{LIST-STYLE-TYPE:none;
}
</style>
</head>
<body>
<divstyle="position:relative;width:340px;height:200px;z-index:1;left:10px;top:15px;background:#eee"id="layer1">
<divid="shou_list1"style="display:block;LIST-STYLE-TYPE:none;position:relative;width:340px;height:120px;z-index:1;left:0px;top:0px;border:0pxredsolid">
<ul>
<listyle="LIST-STYLE-TYPE:none;">
<divstyle="position:relative;left:0px;top:10px;width:90px;height:120px;z-index:1;padding-top:10px;padding-left:10px;FLOAT:left;">
<imgid="list_img"style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=0.2,gradientSize=0.5,motion=forward);"border="0"src="http://case.blueidea.com/files/2007/10/16/work_330571_2572_20071016_130451_2090454_t.jpg"width="100"height="100">
</div>
<divstyle="position:relative;left:0px;top:-10px;width:220px;height:120px;z-index:1;padding-top:10px;padding-left:10px">
<h4id="list_title">半夜三更还能看到此等精彩段子1</h4><br>
<spanid="list_con"style="font-size:12px">连树上的孔雀在他头上拉屎，也全然不觉，1</span>
</div>
</li>
</ul>
</div>
<script>
varlistImg=[];
listImg[1]="http://case.blueidea.com/files/2007/10/16/work_330571_2572_20071016_130451_2090454_t.jpg";
listImg[2]="http://case.blueidea.com/files/2007/10/16/work_391904_2577_20071016_185954_1501159_t.jpg";
listImg[3]="http://case.blueidea.com/files/2007/10/19/work_380874_2673_20071019_151147_8059998_t.jpg";
varlistTitle=[];
listTitle[1]="半夜三更还能看到此等精彩段子1"
listTitle[2]="半夜三更还能看到此等精彩段子2"
listTitle[3]="半夜三更还能看到此等精彩段子3"
varlistCon=[];
listCon[1]="连树上的孔雀在他头上拉屎，也全然不觉，1"
listCon[2]="连树上的孔雀在他头上拉屎，也全然不觉，2"
listCon[3]="连树上的孔雀在他头上拉屎，也全然不觉，3"
functiongetobjstyle(o){returndocument.getElementById(o).style}
varshow_n=2
varshow_max=3
functionshow(){
if(show_n>show_max)show_n=1;
with(document.getElementById("list_img")){
filters[0].Apply();
src=listImg[show_n];
filters[0].play();
}
document.getElementById("list_title").innerHTML=listTitle[show_n]
document.getElementById("list_con").innerHTML=listCon[show_n]
show_n++;
}
functionMarqueeLinkBox(id,lh,speed,delay){
varo=document.getElementById(id);
o.innerHTML+=o.innerHTML+o.innerHTML
varp=false;
vart;
o.style.overflow="hidden";
o.style.lineHeight=lh+"px";
o.style.height=lh*3+"px";

vartemp
varso=document.getElementById("list_sp").getElementsByTagName("span");
for(varj=0;j<so.length;j++){
so[j].index=j;
so[j].onmouseover=function(){p=true;this.style.background="#dff";temp_show(this)}
so[j].onmouseout=function(){p=false;this.style.background="#eee";show_n=temp;}
}
functiontemp_show(obj){
ta=obj.index+1;
ta=((ta%3)==0)?3:(ta%3)
temp=show_n;
show_n=ta;
document.getElementById("list_img").src=listImg[show_n];
document.getElementById("list_title").innerHTML=listTitle[show_n]
document.getElementById("list_con").innerHTML=listCon[show_n]
}

functionstart(){
t=setInterval(scrolling,speed);
if(!p)o.scrollTop++;
}
functionscrolling(){
if((o.scrollTop%lh)!=0){
o.scrollTop++;
if(o.scrollTop>=o.scrollHeight-lh*3-1){
varal=listImg.length-1
varn=((al%3)==0)?3:(al%3)
o.scrollTop=lh*n;
}
}
else{
clearInterval(t);
setTimeout(start,delay);
if(!p)show()
}
}
setTimeout(start,delay);
}
</SCRIPT>
<divid="list"style="position:relative;width:240px;height:54px;z-index:1;left:0px;top:0px;border:0pxsolid#00f;OVERFLOW:hidden;padding:0px10px">
<divid="list_sp">
<spanid="list1"style="CURSOR:pointer;"onclick="show_n=0;show()">不想人生一场醉</span><br>
<spanid="list2"style="CURSOR:pointer;"onclick="show_n=1;show()">名字可以这么长</span><br>
<spanid="list3"style="CURSOR:pointer;"onclick="show_n=2;show()">一江冬水向春流</span><br>
</div></div>
<SCRIPT>
MarqueeLinkBox("list_sp",18,10,3000);
</SCRIPT>
</div>
</body>
</html>
iteye_6481
关注
用vue写卡片切换效果
weixin_48047636的博客
05-20 1262
<template> <div> <div class="app"> <div id="tabs"> <div> <span v-for='(item,index) in items' :key="index" @click="current=index" :class="{active:current==index}" >{{item.title}}</sp
图文左右切换效果网页特效
11-16
4. Vue.js、React.js 或 Angular.js：这些现代前端框架都提供了数据绑定和组件化特性，可以方便地构建动态的图文切换效果。 总结来说，图文左右切换效果网页特效是一种提升用户体验的重要手段，涉及HTML、CSS和...
JavaScript图文混排滑动切换效果.rar
07-10
JavaScript图文混排滑动切换效果，看上去像是一个文章排行，当你把鼠标放上的时候就会发现奥妙了，鼠标每移动一行，就会出现对应的图片。这样会增加一些吸引力，指引用户浏览网页。
jQuery图文结合滚动切换效果
05-07
Query图文结合滚动切换效果，这款jQuery图文切换插件比较普通，但是一款很实用的jQuery焦点图。
分享188个JS图片效果JS代码，总有一款适合你
zy0412326的专栏
02-22 6814
分享188个JS图片效果JS代码，总有一款适合你 链接：https://pan.baidu.com/s/1rr6TZYdgTasR3NCE6bBqnA 提取码：6oxy 下面是文件的名字，我放了一些图片，文章里不是所有的图主要是放不下...，大家下载后可以看到。 JS鼠标拖拽图片切换代码 jQuery全屏图片放大缩小代码 JSON动态获取图片切换代码 jQuery图片3D翻转切换代码 HTML5三维布局图片切换代码 swiper.js手机图片滑动切换代码 jQuery标签TAB控制图片切换代码 j.
利用JS实现图片切换
热门推荐
dweblover的博客
11-19 4万+
事件举例: 1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。 说明： 1.一般来说对于一个事件问题处理起来分为三个步骤： （1）获取事件 （2）绑定事件 （3）书写事件驱动程序 代码如下 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&q
swiperjs产品介绍图文卡片切换
ICode联盟
08-27 393
下载地址jQuery基于swiper.js制作主机商城产品案例和解决方案列表单排滚动布局，支持默认自动滚动、带左右按钮和索引分页控制效果代码。 dd:
js按钮实现切换图片效果
zag666的博客
11-01 7631
通过JavaScript设置按钮功能实现点击按钮切换上一张、下一张图片。（具体实现代码在图片后面）。 浏览器实现效果： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <styl...
html图片自动切换的幻灯片效果的,JS实现可切换图片的幻灯切换效果示例
weixin_31775717的博客
06-04 428
本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考，具体如下：JS切换图片幻灯切换效果body, div, ul, li { margin: 0; padding: 0; }ul { list-style-type: none; }body { background: #000; text-align: center; font: 12px/20px Arial; }#box {...
CSS3+JavaScript实现悬停图文切换效果代码
weixin_32005771的博客
10-19 974
本文还有配套的精品资源，点击获取 简介：CSS3和JavaScript共同为公司Logo及图文展示增加了动态交互效果。当用户悬停在Logo上时，将展示更多公司信息或相关图片，提升了用户体验。该实例可能涉及到使用CSS3的 :hover 伪类、 transition 和 animation 属性，以及JavaScript的事件监听器。...
jQuery的animate函数实现图文切换动画效果
10-24
在本例中，我们将探讨如何使用animate()来实现图文切换的动画效果，这在许多网页设计中是非常常见的应用场景。 首先，让我们了解一下animate()函数的基本语法： ```javascript $(selector).animate(properties, ...
jquery简约式图文banner切换效果特效代码
03-20
《jQuery实现简约图文Banner切换效果详解》 在网页设计中，动态的Banner切换效果是吸引用户注意力、提升页面视觉体验的重要元素。本文将详细介绍如何利用jQuery实现一款简约风格的图文Banner切换效果，让您的网站...
jquery鼠标悬停遮罩图文切换效果
11-18
本文将深入探讨“jQuery鼠标悬停遮罩图文切换效果”的实现原理及其实现步骤，帮助你理解这一常见且实用的前端技术。 首先，让我们了解“鼠标悬停”事件。在网页上，当用户的鼠标指针移动到某个元素上方时，就会触发...
模拟新浪微博图文混排切换效果
06-11
在IT行业中，模拟新浪微博的图文混排切换效果是一项常见的网页前端开发任务，它涉及到用户体验设计、HTML、CSS以及JavaScript等关键技术。这个项目的目标是创建一个类似新浪微博的界面，用户可以浏览图文并茂的内容...
JS特效：令人震撼的图片展示效果
08-11 370
1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">2<html>3<head>4<title>2</title>5<metahttp-equiv="imagetoolba...
Python实现简单的HTTP服务器.doc
最新发布
08-14
Python实现简单的HTTP服务器.doc
JavaScript实现图文切换效果
在图文切换效果中，JavaScript负责处理用户的交互动作，控制CSS类的添加或移除，从而触发图文内容的切换。 #### 2.1 交互触发 用户通常通过点击按钮或其他元素来触发图文切换效果。JavaScript监听这些元素的点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值