1顶

js+css设计带左右按钮和编号幻灯片切换特效

稿源：互联网 2022-04-02 21:40:38 点击： 13439 撤稿纠错

js+css打造经典幻灯片图片切换特效，可点击按钮或数字编号实现切换功能。

以下讨论的是和按钮编号幻灯片图片切换相关的js+css设计带左右按钮和编号幻灯片切换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>站长特效 js+css设计带左右按钮和编号幻灯片切换特效 站长特效网</title>
<style type=text/css>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
p{line-height:24px;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif;}
table{border-collapse:collapse;border-spacing:0;}
#wwwzzjsnet UL {LIST-STYLE: none none outside}
#wwwzzjsnet .frame {WIDTH: 515px; POSITION: relative; HEIGHT: 310px; overflow:hidden; margin:30px auto 0 auto;}
#wwwzzjsnet .frames {WIDTH: 2920px; POSITION: relative; HEIGHT: 310px}
#wwwzzjsnet .frame-2 {LEFT: 715px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwzzjsnet .frame-3 {LEFT: 1460px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwzzjsnet .frame-4 {LEFT: 2190px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwzzjsnet .frame-5 {LEFT: 2920px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwzzjsnet .controls {DISPLAY: block;  WIDTH: 105px; CURSOR: hand; BOTTOM: 0px; PADDING-TOP: 2px; margin:0 auto;HEIGHT: 20px}
#wwwzzjsnet .overlay {BORDER-RIGHT: #ededed 5px solid; BORDER-TOP: #ededed 5px solid; DISPLAY: none; FILTER: alpha(opacity=90); BORDER-LEFT: #ededed 5px solid; WIDTH: 188px; CURSOR: hand; BORDER-BOTTOM: #ededed 5px solid; POSITION: absolute; HEIGHT: 118px; BACKGROUND-COLOR: #fff; opacity: .9}
#wwwzzjsnet .two-overlay {HEIGHT: 141px}
#wwwzzjsnet .olines {HEIGHT: 122px}
#wwwzzjsnet .two-olines {HEIGHT: 142px}
#wwwzzjsnet .sdw {BORDER-RIGHT: #666 2px solid; BORDER-TOP: #666 0px solid; DISPLAY: block; LEFT: -5px; BORDER-LEFT: #666 0px solid; WIDTH: 196px; BORDER-BOTTOM: #666 2px solid; POSITION: absolute; TOP: -5px; HEIGHT: 127px; opacity: .8}
#wwwzzjsnet .two-sdw {HEIGHT: 151px}
#wwwzzjsnet .slines {HEIGHT: 126px}
#wwwzzjsnet .two-slines {HEIGHT: 149px}
#wwwzzjsnet .details {PADDING-RIGHT: 17px; DISPLAY: block; PADDING-LEFT: 17px; PADDING-BOTTOM: 17px; FONT: 12px arial; WIDTH: 163px; PADDING-TOP: 17px; HEIGHT: 93px}
#wwwzzjsnet .dlines {HEIGHT: 97px}
#wwwzzjsnet .two-dlines {HEIGHT: 137px}
#wwwzzjsnet .title {PADDING-BOTTOM: 8px; FONT: bold 15px "Trebuchet MS"; BORDER-BOTTOM: #ccc 1px solid}
#wwwzzjsnet .priceMsg {PADDING-BOTTOM: 1px; COLOR: #333; PADDING-TOP: 4px}
#wwwzzjsnet .price {FONT: bold 15px arial}
#wwwzzjsnet .legal {FONT: 11px arial; COLOR: #666}
#wwwzzjsnet .terms {FLOAT: right; WIDTH: 80px}
#wwwzzjsnet .content {PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; FILTER: alpha(opacity=80); PADDING-BOTTOM: 5px; WIDTH: 695px; PADDING-TOP: 5px; POSITION: absolute; TOP: 258px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: justify; opacity: .8}
#wwwzzjsnet .double-des {PADDING-BOTTOM: 12px}
#wwwzzjsnet .des {COLOR: #1161b7; PADDING-TOP: 12px}
#wwwzzjsnet .selected {FLOAT: left; FONT: 17px "trebuchet ms"; MARGIN-LEFT: 4px; WIDTH: 16px; COLOR: #8f8f8f; POSITION: relative; HEIGHT: 15px}
#wwwzzjsnet .off {FLOAT: left; FONT: 17px "trebuchet ms"; MARGIN-LEFT: 4px; WIDTH: 16px; COLOR: #dadada; POSITION: relative; HEIGHT: 15px}
#wwwzzjsnet .on {FLOAT: left; FONT: 17px "trebuchet ms"; MARGIN-LEFT: 4px; WIDTH: 16px; COLOR: #1162b7; POSITION: relative; HEIGHT: 15px}
#wwwzzjsnet .arrow {FLOAT: left; WIDTH: 12px; HEIGHT: 20px}
#wwwzzjsnet .l-a {BACKGROUND: url(/img/arrows_20110121zzjs_net.gif) no-repeat 0px -22px}
#wwwzzjsnet .l-h {BACKGROUND: url(/img/arrows_20110121zzjs_net.gif) no-repeat 0px -47px}
#wwwzzjsnet .r-a {BACKGROUND: url(/img/arrows_20110121zzjs_net.gif) no-repeat 0px -97px}
#wwwzzjsnet .r-h {BACKGROUND: url(/img/arrows_20110121zzjs_net.gif) no-repeat 0px -122px}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<div id=wwwzzjsnet>
 <div class=frame>
  <div class=frames id=zzjs_net>
   <a href="http://www.zzjs.net/" target="_blank">
    <div id=f1 style="BACKGROUND: url(/img/01_20110121zzjs_net.jpg); OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px"></div>
   </a>
   <a href="http://www.zzjs.net/" target="_blank">
    <div class=frame-2 id=f2 ></div>
   </a>
   <a href="http://www.zzjs.net/" target="_blank">
    <div class=frame-3 id=f3 ></div>
   </a>
   <a href="http://www.zzjs.net/" target="_blank">
    <div class=frame-4 id=f4 ></div>
   </a>
   <a href="http://www.zzjs.net/" target="_blank">
    <div class=frame-5 id=f5 ></div>
   </a>
  </div>
 </div>
 <div class=controls>
  <div class="arrow l-a" onmouseover=highlightA(this); onclick=prevF(); onmouseout=dehighlightA(this);></div>
  <div class=off id=control1 onmouseover=hover(1) onclick=press(1,false) onmouseout=out(1)>1</div>
  <div class=off id=control2 onmouseover=hover(2) onclick=press(2,false) onmouseout=out(2)>2</div>
  <div class=off id=control3 onmouseover=hover(3) onclick=press(3,false) onmouseout=out(3)>3</div>
  <div class=off id=control4 onmouseover=hover(4) onclick=press(4,false) onmouseout=out(4)>4</div>
  <div class="arrow r-a" onmouseover=highlightA(this); onclick=nextF(); onmouseout=dehighlightA(this);></div>
 </div>
 <INPUT id=numFrame type=hidden value=4></INPUT>
 <a href="http://www.zzjs.net/" target="_blank"><INPUT id=images1 type=hidden value=/img/01_20110121zzjs_net.jpg></INPUT></a>
 <a href="http://www.zzjs.net/" target="_blank"><INPUT id=images2 type=hidden value=/img/02_20110121zzjs_net.jpg></INPUT> </a>
 <a href="http://www.zzjs.net/" target="_blank"><INPUT id=images3 type=hidden value=/img/03_20110121zzjs_net.jpg></INPUT>
 <a href="http://www.zzjs.net/" target="_blank"><INPUT id=images4 type=hidden value=/img/04_20110121zzjs_net.jpg></INPUT>
</div>
<SCRIPT type="text/javascript">
var fadeDelay,slidetimer,scrolltimer,c;var autoPlay=false;var bgimages=[];init();play();function carousel(a){this.p=new pagination(a);this.s=new stage();this.selectedIndex=-1;this.busy=false}function pagination(a){this.buttons=[a];var b=0;for(b=0;b<a;b++){this.buttons[b]=new pagebutton(b+1)}}function pagebutton(a){this.id="control"+a;this.elem=document.getElementById(this.id)}function stage(){this.frames=[5];this.frames[0]=new frame(1,true,8);this.frames[1]=new frame(2,true,8);this.frames[2]=new frame(3,true,8);this.frames[3]=new frame(4,true,8);this.frames[4]=new frame(5,true,8)}function frame(b,a,f){this.id="f"+b;this.elem=document.getElementById(this.id);this.activeOverlay=-1;this.imgLoaded=false;this.overlays=[f];var d=1;for(d;d<=f;d++){var e=new overlay(this.id,d);this.overlays[d-1]=e}if(a){this.spots=[f];d=1;for(d;d<=f;d++){var g=new hotspot(this.id,d);this.spots[d-1]=g}}}function hotspot(a,b){this.id=a+"h"+b;this.elem=document.getElementById(this.id)}function overlay(a,b){this.id=a+"t"+b;this.elem=document.getElementById(this.id)}function init(){var a=document.getElementById("numFrame").value;var b="images";for(i=0;i<a;i++){bgimages[i]=document.getElementById(b+(i+1)).value}c=new carousel(a);hit(1);c.s.frames[0].imgLoaded=true;c.selectedIndex=1}function play(){if(autoPlay){return}autoPlay=true;scrolltimer=setInterval(goToNextFrame,8000)}function pause(){if(!autoPlay){return}autoPlay=false;if(scrolltimer==undefined||scrolltimer==null){return}clearInterval(scrolltimer);scrolltimer=null}function restart(){pause();play()}function goToNextFrame(){if(autoPlay){var a=nextFrame();press(a,true)}}function nextFrame(){if(c.selectedIndex==bgimages.length){return 1}else{if(c.selectedIndex<bgimages.length){return((c.selectedIndex*1)+1)}else{return 1}}}function prevFrame(){if(c.selectedIndex>1){return((c.selectedIndex*1)-1)}else{return document.getElementById("numFrame").value}}function loadImg(b){if(b!=-1){var a=c.s.frames[b-1];if(a.imgLoaded){return}}elem=document.getElementById(c.s.frames[b-1].id);elem.style.backgroundImage="url("+bgimages[b-1]+")";c.s.frames[b-1].imgLoaded=true}function hover(a){if(a==-1||a==c.selectedIndex){return}loadImg(a);c.p.buttons[a-1].elem.className="on"}function unhit(a){if(a==-1){return}c.p.buttons[a-1].elem.className="off"}function out(a){if(a==-1||a==c.selectedIndex){return}c.p.buttons[a-1].elem.className="off"}function hit(a){if(a==-1||a==c.selectedIndex){return}c.p.buttons[a-1].elem.className="selected"}function active(){if(c.selectedIndex==-1){return}pause();updateFrame(true)}function deactive(){if(c.selectedIndex==-1){return}var a=c.s.frames[c.selectedIndex-1];if(a==null){return}updateFrame(false);restart()}function updateFrame(d){var b=c.s.frames[c.selectedIndex-1];if(b==null){return}if(b.spots==null){return}var a=b.spots.length;if(!d){clearOverlay(b)}for(a;a>0;a--){}}function clearOverlay(a){if(a.activeOverlay!=-1){var b=a.overlays[a.activeOverlay-1];hideOverlay(b.id);a.activeOverlay=-1}}function fadeOverlay(a){fadeDelay=setTimeout("hideOverlay('"+a+"')",700);hideOtherVisibleOverlays(a)}function hideOtherVisibleOverlays(b){var e=b.substring(0,2);var d=getElementsByClassName(document.getElementById(e),"a","overlay");for(var a=0;a<d.length;a++){if(d[a].style.display=="block"&&d[a].id!=b){d[a].style.display="none"}}}function getElementsByClassName(b,g,a){var f=(g=="*"&&b.all)?b.all:b.getElementsByTagName(g);var j=new Array();a=a.replace(/-/g,"\-");var h=new RegExp("(^|\s)"+a+"(\s|$)");var e;for(var d=0;d<f.length;d++){e=f[d];if(h.test(e.className)){j.push(e)}}return(j)}function hideOverlay(a){elem=document.getElementById(a);hide(elem);c.s.frames[c.selectedIndex-1].activeOverlay=-1}function showOverlay(b,d){hideOtherVisibleOverlays(b);if(fadeDelay!=undefined){clearTimeout(fadeDelay);fadeDelay=undefined}if(c.s.frames[c.selectedIndex-1].activeOverlay==d){return}clearOverlay(c.s.frames[c.selectedIndex-1]);var a=document.getElementById(b);show(a);c.s.frames[c.selectedIndex-1].activeOverlay=d}function changeOpac(b,d){var a=document.getElementById(d).style;a.opacity=(b/100);a.MozOpacity=(b/100);a.KhtmlOpacity=(b/100);a.filter="alpha(opacity="+b+")"}function showLegal(){elem=document.getElementById("legal");show(elem)}function hideLegal(){elem=document.getElementById("legal");hide(elem)}function hide(a){if(a==null||a.style.display=="none"){return}a.style.display="none"}function show(a){if(a==null||a.style.display=="block"){return}a.style.display="block"}function press(b,a){if(c.busy||b==c.selectedIndex){return}loadImg(b);deactive();hit(b);unhit(c.selectedIndex);slide(b,a);c.selectedIndex=b}function slide(b,a){c.busy=true;if(slidetimer!=undefined||slidetimer!=null){clearTimeout(slidetimer)}(a||b>c.selectedIndex)?scrollRight(b,c.selectedIndex):scrollLeft(b,c.selectedIndex)}function scrollRight(d,a){var b=document.getElementById("zzjs_net");b.style.left="0px";reposition(a,0);reposition(d,1);reIndex(d,a);scroll(0,-715)}function scrollLeft(d,a){var b=document.getElementById("zzjs_net");b.style.left="-715px";reposition(d,0);reposition(a,1);reIndex(d,a);scroll(-715,0)}function reIndex(e,b){var d=2;var a=c.s.frames.length;for(a;a>0;a--){if(a!=e&&a!=b){reposition(a,d++)}}}function reposition(b,a){c.s.frames[b-1].elem.style.left=715*a+"px"}function scroll(d,a){var b=document.getElementById("zzjs_net");next=d,slidetimer=0,interval=50,speed=40;if(d<a){next+=interval}else{if(d>a){next-=interval}}if(next>0||(next<a&&d>a)||(next>a&&d<a)){next=next>0?0:a;b.style.left=next+"px";c.busy=false}else{b.style.left=next+"px";slidetimer=setTimeout("scroll("+next+", "+a+")",speed)}}function highlightA(a){if(a.className=="arrow r-a"){a.className="arrow r-h"}if(a.className=="arrow l-a"){a.className="arrow l-h"}}function dehighlightA(a){if(a.className=="arrow r-h"){a.className="arrow r-a"}else{if(a.className=="arrow l-h"){a.className="arrow l-a"}}}function prevF(){if(c.busy||a==c.selectedIndex){return}var a=prevFrame();loadImg(a);deactive();hit(a);unhit(c.selectedIndex);c.busy=true;if(slidetimer!=undefined||slidetimer!=null){clearTimeout(slidetimer)}scrollLeft(a,c.selectedIndex);c.selectedIndex=a}function nextF(){if(c.busy||a==c.selectedIndex){return}var a=nextFrame();loadImg(a);deactive();hit(a);unhit(c.selectedIndex);c.busy=true;if(slidetimer!=undefined||slidetimer!=null){clearTimeout(slidetimer)}scrollRight(a,c.selectedIndex);c.selectedIndex=a};
</SCRIPT>
</body>
</html>

关于js+css设计带左右按钮和编号幻灯片切换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012467134.shtml方便下次再访问哦。

·上一篇： js+css实现图片上下滚动展示特效
·下一篇： 可灵活调用js+flash焦点图切换特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

js+css设计带左右按钮和编号幻灯片切换特效

文章分类LIST >>返回首页

最新游戏

最新新闻