js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码。分享给大家供大家参考。具体如下：
这里演示js+div文字滚动和图片切换代码，为了演示方便，去掉了图片调用，用数字代替了，用时候再加上就可以了，本效果实现了两种效果，Div切换，TAB切换，和文字滚动，鼠标移上后文字停止滚动，两种功能可任意剥离出来，这不影响代码使用。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes/
具体代码如下：
<!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=utf-8" />
<title>TAB切换和文字滚动</title>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
width: 600px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
// <!CDATA[
function lunTab(m)
{
for(var j=1;j<=4;j++)
{
if(m==j)
{
document.getElementById("div"+j).style.display="block";
document.getElementById("3"+j).className="on";
}
else{
document.getElementById("div"+j).style.display="none";
document.getElementById("3"+j).className="";
}
}
}
// ]]>
</script>
</head>
<body>
<div class="main-center clearfix">
<div class="txt">
<div class="tit">
<a href="#" id="31" onmouseover="lunTab(1)">急速提分一对一</a> | <a href="#" id="32" onmouseover="lunTab(2)">集训营</a> | <a href="#" id="33" onmouseover="lunTab(3)">协议包括VIP</a> | <a href="#" id="44" onmouseover="lunTab(4)">一卡通</a></div>
<div class="box-b" id="div1" style="display: block;">
<div id="demo">
<div id="indemo">
<div id="demo1">
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>1333333333</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center; float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;float:left"></div>14444444444</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>1555555555</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>6666666666</div>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
<div class="box-b" id="div2" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">3</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">4</div>
</div>
<div class="box-b" id="div3" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">5</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">6</div>
</div>
<div class="box-b" id="div4" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">7</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">8</div>
</div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js代码实现无缝滚动(文字和图片)，包括了js代码实现无缝滚动(文字和图片)的使用技巧和注意事项，需要的朋友参考一下 一款适用于方案和图片的JS无缝滚动代码，可控制向左或向右滚动，代码不算复杂，而且本无缝滚动代码兼容性也挺好，你几乎不需要修改什么代码，就能使用了。测试时候把那些带标号的方块都改成图片吧，这样就更有感觉了。 代码如下： 以上所述就是本文针对js代码实现无缝滚动(文字和图
-
本文向大家介绍JS实现图片切换特效，包括了JS实现图片切换特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现图片切换的具体代码，供大家参考，具体内容如下 知识点： 1.window.onload网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果： 点击上一张下一章切换图片 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐
-
本文向大家介绍Android实现图片滚动效果，包括了Android实现图片滚动效果的使用技巧和注意事项，需要的朋友参考一下 Android开发图片滚动效果，供大家参考，具体内容如下 效果图： 设置适配来设置图片位置大小 main添加图片资源 布局 drawable放置图片资源 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js图片轮播手动切换效果，包括了js图片轮播手动切换效果的使用技巧和注意事项，需要的朋友参考一下 利用ScrollPicLeft.js这个库实现图片的前后切换，适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样，而是可以手动的去点击前后切换箭头按钮，进行图片的翻页，从而达到浏览上一张，下一张的效果。 不需要调用jquery，初始化简单，使用非常的简单，便利
-
本文向大家介绍JS实现可切换图片的幻灯切换效果示例，包括了JS实现可切换图片的幻灯切换效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考，具体如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与
-
本文向大家介绍jquery+css实现动感的图片切换效果，包括了jquery+css实现动感的图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 基本思路：定义一个数组存放需要展示的图片，接着当单击图片时删除zoomIn类，添加fadeOutRight类，实现实图右