js+css设计带左右箭头和编号图片切换特效

3周前 (04-21 12:55)阅读24回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4494
  • 级别管理员
  • 主题898
  • 回复2
楼主

js+css打造经典幻灯片图片切换特效，用户可点击底部的左右箭头按钮或数字编号实现立即切换显示功能，根据自己的需求来自定义。

<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种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;}
#wwwwumingren UL {LIST-STYLE: none none outside}
#wwwwumingren .frame {WIDTH: 515px; POSITION: relative; HEIGHT: 310px; overflow:hidden; margin:30px 50px 50px 50px;}
#wwwwumingren .frames {WIDTH: 2920px; POSITION: relative; HEIGHT: 310px}
#wwwwumingren .frame-2 {LEFT: 715px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwwumingren .frame-3 {LEFT: 1460px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwwumingren .frame-4 {LEFT: 2190px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwwumingren .frame-5 {LEFT: 2920px; OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px}
#wwwwumingren .controls {DISPLAY: block;  WIDTH: 105px; CURSOR: hand; BOTTOM: 0px; PADDING-TOP: 2px; margin:0 0 0 250px;HEIGHT: 20px}
#wwwwumingren .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}
#wwwwumingren .two-overlay {HEIGHT: 141px}
#wwwwumingren .olines {HEIGHT: 122px}
#wwwwumingren .two-olines {HEIGHT: 142px}
#wwwwumingren .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}
#wwwwumingren .two-sdw {HEIGHT: 151px}
#wwwwumingren .slines {HEIGHT: 126px}
#wwwwumingren .two-slines {HEIGHT: 149px}
#wwwwumingren .details {PADDING-RIGHT: 17px; DISPLAY: block; PADDING-LEFT: 17px; PADDING-BOTTOM: 17px; FONT: 12px arial; WIDTH: 163px; PADDING-TOP: 17px; HEIGHT: 93px}
#wwwwumingren .dlines {HEIGHT: 97px}
#wwwwumingren .two-dlines {HEIGHT: 137px}
#wwwwumingren .title {PADDING-BOTTOM: 8px; FONT: bold 15px "Trebuchet MS"; BORDER-BOTTOM: #ccc 1px solid}
#wwwwumingren .priceMsg {PADDING-BOTTOM: 1px; COLOR: #333; PADDING-TOP: 4px}
#wwwwumingren .price {FONT: bold 15px arial}
#wwwwumingren .legal {FONT: 11px arial; COLOR: #666}
#wwwwumingren .terms {FLOAT: right; WIDTH: 80px}
#wwwwumingren .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}
#wwwwumingren .double-des {PADDING-BOTTOM: 12px}
#wwwwumingren .des {COLOR: #1161b7; PADDING-TOP: 12px}
#wwwwumingren .selected {FLOAT: left; FONT: 17px "trebuchet ms"; MARGIN-LEFT: 4px; WIDTH: 16px; COLOR: #8f8f8f; POSITION: relative; HEIGHT: 15px}
#wwwwumingren .off {FLOAT: left; FONT: 17px "trebuchet ms"; MARGIN-LEFT: 4px; WIDTH: 16px; COLOR: #dadada; POSITION: relative; HEIGHT: 15px}
#wwwwumingren .on {FLOAT: left; FONT: 17px "trebuchet ms"; MARGIN-LEFT: 4px; WIDTH: 16px; COLOR: #1162b7; POSITION: relative; HEIGHT: 15px}
#wwwwumingren .arrow {FLOAT: left; WIDTH: 12px; HEIGHT: 20px}
#wwwwumingren .l-a {BACKGROUND: url(/img/20240421_www_wuming_ren_10.gif) no-repeat 0px -22px}
#wwwwumingren .l-h {BACKGROUND: url(/img/20240421_www_wuming_ren_10.gif) no-repeat 0px -47px}
#wwwwumingren .r-a {BACKGROUND: url(/img/20240421_www_wuming_ren_10.gif) no-repeat 0px -97px}
#wwwwumingren .r-h {BACKGROUND: url(/img/20240421_www_wuming_ren_10.gif) no-repeat 0px -122px}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id=wwwwumingren>
<div class=frame>
<div class=frames id=wuming_ren>
<a href="https://www.wuming.ren/" target="_blank">
<div id=f1 style="BACKGROUND: url(/img/20240421_www_wuming_ren_11.jpg); OVERFLOW: hidden; WIDTH: 715px; POSITION: absolute; HEIGHT: 310px"></div>
</a>
<a href="https://www.wuming.ren/" target="_blank">
<div class=frame-2 id=f2 ></div>
</a>
<a href="https://www.wuming.ren/" target="_blank">
<div class=frame-3 id=f3 ></div>
</a>
<a href="https://www.wuming.ren/" target="_blank">
<div class=frame-4 id=f4 ></div>
</a>
<a href="https://www.wuming.ren/" 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="https://www.wuming.ren/" target="_blank"><INPUT id=images1 type=hidden value=/img/20240421_www_wuming_ren_11.jpg></INPUT></a>
<a href="https://www.wuming.ren/" target="_blank"><INPUT id=images2 type=hidden value=/img/20240421_www_wuming_ren_12.jpg></INPUT> </a>
<a href="https://www.wuming.ren/" target="_blank"><INPUT id=images3 type=hidden value=/img/20240421_www_wuming_ren_13.jpg></INPUT> </a>
<a href="https://www.wuming.ren/" target="_blank"><INPUT id=images4 type=hidden value=/img/20240421_www_wuming_ren_14.jpg></INPUT> </a>
</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("wuming_ren");b.style.left="0px";reposition(a,0);reposition(d,1);reIndex(d,a);scroll(0,-715)}function scrollLeft(d,a){var b=document.getElementById("wuming_ren");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("wuming_ren");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>


赞0
踩0
☆收藏0
箭头编号图片切换
回帖

js+css设计带左右箭头和编号图片切换特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息