教程集 > 脚本编程 > javascript > 正文图片特效-腾讯客服图片幻灯切换效果

图片特效-腾讯客服图片幻灯切换效果

发布时间：2023-05-12 编辑：jiaochengji.com

教程集为您提供图片特效-腾讯客服图片幻灯切换效果等资源，欢迎您收藏本站，我们将为您提供最新的图片特效-腾讯客服图片幻灯切换效果资源

提示：您可以先修改部分代码再运行

图片特效-腾讯客服图片幻灯切换效果  <!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>  <title>图片特效-腾讯客服图片幻灯切换效果</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">  img{border:0;}  body{font:normal normal normal 12px/1.5 Tahoma,"宋体";color:#333333;background:url(http://www.zzsky.cn/effect/images/200912110220/body_bg.png) repeat-x top #ffffff;text-align:center;height:100%;}  #main{margin:0 auto;width:910px;text-align:left;margin-top:5px;}  #main h1{background:url(http://www.zzsky.cn/effect/images/200912110220/service_bg.png) no-repeat 0px -260px;border-bottom:1px solid #bcd6e8;padding:3px 0 0 25px;font-size:14px;font-weight:bold;height:24px;position:relative;}  #main h1 .span{position:absolute;float:right;right:10px;top:5px;font-size:12px;font-weight:normal;}  #main h2{height:23px;padding:4px 0 0 15px;font-size:14px;position:relative;font-weight:bold;}  #main h2 .more{float:right;position:absolute;right:10px;top:3px;font-weight:normal;}  .left{float:left;width:670px;}  .banner{width:670px;height:240px;margin-top:5px;position:relative;}  .banner_tab{height:43px;position:absolute;right:5px;bottom:5px;}  .banner_tab ul{cursor:pointer;}  .banner_tab li{float: left;list-style-type: none;text-align: center;}  .banner_tab a{width:80px;height:43px;display:block;margin-right:2px;}  .banner_tab img{border:1px solid #659ab6;}  .hidecontent {display:none;}  .on{background:url(http://www.zzsky.cn/effect/images/200912110220/ad_bg2.png) no-repeat;}  .on img{border:1px solid #0099ff;}  .clear{clear:both;}  .tab_img{width:72px;height:35px;margin-top:3px;border:1px solid #fff;}  </style>  <script type="text/javascript">  function setTab(/*string*/name,/*int*/ itemCnt,/*int*/ curItem, /**/classHide, /**/classShow)  {          for(i=1;i<=itemCnt;i  )          {                  eval("document.getElementById('tab_"   name   "_"   i   "').className='"   classHide   "'");          }           eval("document.getElementById('tab_"   name   "_"   curItem   "').className='"   classShow   "'");    for(i=1;i<=itemCnt;i  )  {    eval("ele_hide = document.getElementById('con_"   name   "_"   i  "')");    if(ele_hide) ele_hide.style.display = "none";  }  eval("ele_play = document.getElementById('con_"   name   "_"   curItem   "')");  if(ele_play) ele_play.style.display = "block";  }  </script>  </head>  <body>    <div id="main" class="clearfix">  	<div class="left">     		<div class="banner" id="banner">  			<div class="banner_tab clearfix">  				<ul>  					<li id="tab_tophome_1" class="on"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/a/5/1474575449_8787.jpg"  class="tab_img"></li>  					<li id="tab_tophome_2" class="out"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/9/7/1474575449_4921.jpg"  class="tab_img"></li>  					<li id="tab_tophome_3" class="out"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/a/6/1474575449_1666.jpg"  class="tab_img"></li>  					<li id="tab_tophome_4" class="out"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/2/a/1474575450_4527.jpg"  class="tab_img"></li>  				</ul>    			</div>  			<div>  				<div id="con_tophome_1"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/a/5/1474575450_9090.jpg"></div>      				<div id="con_tophome_2"  class="hidecontent"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/9/7/1474575450_6344.jpg"></div>     				<div id="con_tophome_3"  class="hidecontent"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/a/6/1474575450_5660.jpg"></div>     				<div id="con_tophome_4"  class="hidecontent"><img alt="图片特效-腾讯客服图片幻灯切换效果"  src="http://p1.jquerycn.cn/111cn/2/a/1474575450_2641.jpg"></div>       				<div class="clear"></div>  			</div>  		</div>  	</div>  </div>  <script type="text/javascript">  var pause = false;  var con_num = 4;  var startIndex = 1;  function setLoop(){    try{     var oScroll = document.getElementById('banner');     oScroll.noWrap = true;     oScroll.onmouseover = function(e){pause = true;};     oScroll.onmouseout = function(e){pause = false;};     setInterval('scrollTopHome()', 3000);     }catch(e){alert(e.toString());}  }  function scrollTopHome(){    if(pause) return;    startIndex  = 1;    if(startIndex > con_num){startIndex = 1;}    setTab('tophome',4,startIndex,'out','on');  }   setLoop();  </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery幻灯片特效banner切换实例
 基于jquery的15款幻灯片插件
 jQuery图片幻灯手风琴效果插件 Slidorion
jQuery幻灯片插件 SlidesJS
jQuery图片效果切换 Adipoli
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 jquery图片自动切换插件和实例
 jQuery幻灯片插件 Skitter
jQuery幻灯片插件 Slides
jQuery幻灯片播放 Slideshow2!

上一篇：链接title 提示js代码下一篇：很酷的溶解过渡式文字切换效果

[关闭]

图片特效-腾讯客服图片幻灯切换效果

最近更新

浏览排行