页面导航：
→ 正文内容 左右滑动
页面图片浮动左右滑动效果的简单实现案例
本篇文章主要是对页面图片浮动左右滑动效果的简单实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
核心代码：
1.css：16sucai.css 代码如下:html,body {&height: 100%;&margin: 0&padding: 0}a {outline:}img{ border:0;}a img {vertical-align:}a img.last {margin-right: 0; }.box {&width: 850&height:&overflow:&background: #666;&margin-top: 10&margin-right:&margin-bottom: 10&margin-left:&padding-top: 10&padding-right: 0;&padding-bottom: 0;&padding-left: 10}
.box ul {&margin: 0&padding: 0&float:&list-style-type:}
.box li {&width: 150&height: 100&float:&cursor:&display:&margin: 0 10px 10px 0;&border: 5px solid #333;}
#bg {&width: 100%;&height: 898&position:&left: 0&top: 0&background: #000;&filter: alpha(opacity : 50);&opacity: 0.5;&display:}
#bg1 {&width: 100%;&height: 100%;&position:&left: 0&top: 0&background: #000;&filter: alpha(opacity : 50);&opacity: 0.5;&display:}#bottom {&width: 215&height: 50&position:&left: 50%;&bottom: 0&margin: 0 0 0 -107&border: 1px solid #232323;&background: #444;&padding: 1&z-index: 1;&display:}
#bottom ul {&width: 100%;&height: 100%;&margin: 0&padding: 0&list-style-type:&background: #000;}
#bottom li {&background: url(../images/ico.jpg) no-&float:&display:&margin: 8px 0 0 18&cursor:}
#bottom li.prev {&width: 30&height: 33&background-position: 0 0;}
#bottom li.next {&width: 30&height: 33&background-position: -35px 0;}
#bottom li.img {&width: 30&height: 33&background-position: -106px 0;}
#bottom li.close {&width: 31&height: 33&background-position: -70px 0;}
#frame {&background: #&padding: 3&position:&z-index: 2;&display:&filter: alpha(opacity : 0);&opacity: 0;&text-align:}
#bottom1 {&width: 215&height: 50&position:&left: 50%;&bottom: 0&margin: 0 0 0 -107&border: 1px solid #232323;&background: #444;&padding: 1&z-index: 1;&display:}
#bottom1 ul {&width: 100%;&height: 100%;&margin: 0&padding: 0&list-style-type:&background: #000;}
#bottom1 li {&background: url(../../images/ico.jpg) no-&float:&display:&margin: 8px 0 0 18&cursor:}
#bottom1 li.prev {&width: 30&height: 33&background-position: 0 0;}
#bottom1 li.next {&width: 30&height: 33&background-position: -35px 0;}
#bottom1 li.img {&width: 30&height: 33&background-position: -106px 0;}
#bottom1 li.close {&width: 31&height: 33&background-position: -70px 0;}
#frame1 {&background: #&padding: 3&position:&z-index: 2;&display:&filter: alpha(opacity : 0);&opacity: 0;&text-align:}/html,body {&height: 100%;&margin: 0&font-size: 12}
.mydiv {&background-color: #FFCC66;&background:url(../images/loginbg.png) no-&border: 0px solid #f00;&overflow-y:&overflow-x:&text-align:&line-height: 40&font-size: 12&font-weight:&z-index: 999;&width: 434&height: 238&left: 50%;&top: 50%;&margin-left: -200px ! /*FF IE7 该值为本身宽的一半 */&margin-top: -80px ! /*FF IE7 该值为本身高的一半*/&margin-top: 0&position: fixed ! /* FF IE7*/&position: /*IE6*/&_top: expression(eval(document . compatMode && &&&&&&&&&&&& document . compatMode == 'CSS1Compat') ? &&&&&&&&&&&& documentElement . scrollTop +&& ( document .& documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/ &&&&&&&&&&&& document . body . scrollTop +&& ( document . body .& clientHeight -&& this . clientHeight )/ 2 ); /*IE5 IE5.5*/}.mydiv1 {&background-color: #FFCC66;&border: 0px solid #f00;&text-align:&line-height: 40&font-size: 12&font-weight:&overflow-y:&overflow-x:&z-index: 999;&width: 434&height: 238&left: 50%;&top: 50%;&margin-left: -200px ! /*FF IE7 该值为本身宽的一半 */&margin-top: -80px ! /*FF IE7 该值为本身高的一半*/&margin-top: 0&position: fixed ! /* FF IE7*/&position: /*IE6*/&_top: expression(eval(document . compatMode && &&&&&&&&&&&& document . compatMode == 'CSS1Compat') ? &&&&&&&&&&&& documentElement . scrollTop +&& ( document .& documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/ &&&&&&&&&&&& document . body . scrollTop +&& ( document . body .& clientHeight -&& this . clientHeight )/ 2 ); /*IE5 IE5.5*/}.bg,.popIframe {&background-color: #666;&display:&width: 100%;&height: 100%;&left: 0;&top: 0; /*FF IE7*/&filter: alpha(opacity = 50); /*IE*/&opacity: 0.5; /*FF*/&z-index: 1;&position: fixed ! /*FF IE7*/&position: /*IE6*/&_top: expression(eval(document . compatMode && &&&&&&&&&&&& document . compatMode == 'CSS1Compat') ? &&&&&&&&&&&& documentElement . scrollTop +&& ( document .& documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/ &&&&&&&&&&&& document . body . scrollTop +&& ( document . body .& clientHeight -&& this . clientHeight )/ 2 );}
.popIframe {&filter: alpha(opacity = 0); /*IE*/&opacity: 0; /*FF*/}2.js事件： 代码如下:& &link rel="stylesheet" type="text/css" href="&%=path%&/css/16sucai.css" /&&& &script type="text/javascript"&&& function aa(id){&&& var ID = id.substring(1,2);&&& var obj2 = document.getElementById(ID);&&& showPigDyt(obj2);&& }&& function showInfo(id)& {&& document.getElementById(id).style.display = "block";& }& function hiddenInfo(id)& {&& document.getElementById(id).style.display = "none";& }&& &/script&& &script language="javascript"&&& //首页点击查看景点热门照片& function showPigDyt(obj2) {&& var srcPath = obj2.&& var ID= obj2.&& var oBox = document.getElementById("con");&& var oBg = document.getElementById("bg");&& var oBot = document.getElementById("bottom");&& var aBli = oBot.getElementsByTagName("li");& && var oFrame = document.getElementById("frame");&& //var aLi = oBox.getElementsByTagName("li");&& var aLi=$("li[class='conn']");//获取所有a标签的li标签(集合)&& //var aImg = oBox.getElementsByTagName("img");&& var aImg=$("img[class='conn']");//获取所有a标签里的img标签(集合)&& //alert(aImg);&& var i = iNow = 0;&& for (i = 0; i & aLi. i++) {&&& aLi[i].index =&&& aLi[i].onclick = function () {&&&& with (oFrame.style) {&&&&& display = "block", top = this.offsetTop + "px", left = this.offsetLeft + "px", width = this.offsetWidth + "px", height = this.offsetHeight + "px";&&&& }&&&& //alert(srcPath);&&&& oFrame.innerHTML = "&img id=\"" + ID + "\" onmouseover='upNext(this)' src=\"" + (srcPath) + "\" /&";&&&& var oImg = oFrame.getElementsByTagName("img")[0];&&&& var iW&&&& var iH&&&& if(oImg.width & 600 || oImg.width == 0){&&&&& iWidth = 600;&&&& }else{&&&&& iWidth = oImg.&&&& }&&&& if(oImg.width & 425 || oImg.height == 0){&&&&& iHeight = 425;&&&& }else{&&&&& iHeight = oImg.&&&& }&&&& var iLeft = parseInt((document.documentElement.clientWidth / 2) - (iWidth / 2));&&&& var iTop = parseInt((document.documentElement.clientHeight / 2) - (iHeight / 2) - 50);&&&& with (oImg.style) {&&&&& height = width = "100%";&&&& }&&&& startMove(oFrame, {opacity:100, left:iLeft, top:iTop, width:iWidth, height:iHeight});&&&& oBg.style.display = "block";&&&& oBot.style.display = "block";&&&& iNow = this.index + 1;&&& };&& }&& document.onmousedown = function () {&&&&& };&& aBli[0].onclick = function () {&& //箭头向左事件触发&&& if(ID == 0){&&&& ID = aLi.&&& }&&& ID--;&&& var pathImg = document.getElementById(ID).&&& oFrame.innerHTML = "&img& id=\"" + ID + "\" onmouseover='upNext(this)' src=\"" + pathImg + "\" width=\"100%\" height=\"100%\" /&";&& };&& aBli[1].onclick = function () {&&& oFrame.style.cursor = "move";&&& oFrame.onmousedown = function (e) {&&&& var oEvent = e ||&&&& var X = oEvent.clientX - oFrame.offsetL&&&& var Y = oEvent.clientY - oFrame.offsetT&&&& document.onmousemove = function (e) {&&&&& var oEvent = e ||&&&&& var L = oEvent.clientX - X;&&&&& var T = oEvent.clientY - Y;&&&&& if (L & 0) {&&&&&& L = 0;&&&&& } else {&&&&&& if (L & document.documentElement.clientWidth - oFrame.offsetWidth) {&&&&&&& L = document.documentElement.clientWidth - oFrame.offsetW&&&&&& }&&&&& }&&&&& if (T & 0) {&&&&&& T = 0;&&&&& } else {&&&&&& if (T & document.documentElement.clientHeight - oFrame.offsetHeight) {&&&&&&& T = document.documentElement.clientHeight - oFrame.offsetH&&&&&& }&&&&& }&&&&& oFrame.style.left = L + "px";&&&&& oFrame.style.top = T + "px";&&&&& oFrame.style.margin = 0;&&&&&&&&& };&&&& document.onmouseup = function () {&&&&& document.onmouseup =&&&&& document.onmousemove =&&&& };&&&&&&& };&& };&& aBli[2].onclick = function () {& //箭头向右事件触发&&& if(ID == (aLi.length-1)){&&&& ID = -1;&&& }&&& ID++;&&& var pathImg = document.getElementById(ID).&&& oFrame.innerHTML = "&img id=\"" + ID + "\" onmouseover='upNext(this)' src=\"" + pathImg + "\" width=\"100%\" height=\"100%\" /&";&& };&& aBli[3].onclick = function () {& //箭头关闭事件触发&&& //alert("32" + iNow - 1);&&& //alert("32" + aImg[iNow - 1].offsetTop);&&& startMove(oFrame, {opacity:0, left:aImg[iNow - 1].offsetLeft, top:aImg[iNow - 1].offsetTop, width:150, height:100}, function () {&&&& oFrame.style.display = "none";&&&& oBg.style.display = "none";&&&& oBot.style.display = "none";&&&& oFrame.onmousedown =&&&& oFrame.style.cursor = "auto";&&& });&& };& }& function upNext(bigimg){&& var oBox = document.getElementById("con");&& //var aLi = oBox.getElementsByTagName("li");&& var aLi=$("li[class='conn']");//获取所有a标签的li标签&& var ID = bigimg.&& var leftId;&& var rightId;&& if(ID == 0){&&& leftId = aLi.&&& rightId = 1;&& }else if(ID == (aLi.length-1)){&&& leftId = (aLi.length-1);&&& rightId = 0;&& }else{&&& var leftId = ID++;&&& var rightId = ID--;&& }&& var leftpath = document.getElementById(--leftId).&& var rightpath = document.getElementById(rightId).&& var lefturl = "&img id=\"" + leftId + "\" onmouseover='upNext(this)' src=\"" + leftpath + "\" width=\"100%\" height=\"100%\" /&";&& var righturl = "&img id=\"" + rightId + "\" onmouseover='upNext(this)' src=\"" + rightpath + "\" width=\"100%\" height=\"100%\" /&";&& var width = bigimg.&& var height = bigimg.&& var imgurl =&& var oFrame = document.getElementById("frame");&& bigimg.onmousemove=function(){&&& if(event.offsetX&width/2){&&&& bigimg.style.cursor = 'url(images/arr_left.cur),auto';&&&& imgurl =&&& }else{&&&& bigimg.style.cursor = 'url(images/arr_right.cur),auto';&&&& imgurl =&&& }&& }&& bigimg.onmouseup=function(){&&& if(event.offsetX & width/2){&&&& oFrame.innerHTML =&&& }else{&&&& oFrame.innerHTML =&&& }&& }& }& function startMove(obj, json, onEnd) {&& clearInterval(obj.timer);&& obj.timer = setInterval(function () {&&& doMove(obj, json, onEnd);&& }, 30);& }& function getStyle(obj, attr) {&& return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];& }& function doMove(obj, json, onEnd) {&& var attr = "";&& var bStop =&& for (attr in json) {&&& var iCur = 0;&&& if (attr == "opacity") {&&&& iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);&&& } else {&&&& iCur = parseInt(getStyle(obj, attr));&&& }&&& var iSpeed = (json[attr] - iCur) / 5;&&& iSpeed = iSpeed & 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);&&& if (json[attr] != iCur) {&&&& bStop =&&& }&&& if (attr == "opacity") {&&&& obj.style.filter = "alpha(opacity:" + (iCur + iSpeed) + ")";&&&& obj.style.opacity = (iCur + iSpeed) / 100;&&& } else {&&&& obj.style[attr] = iCur + iSpeed + "px";&&& }&& }&& if (bStop) {&&& clearInterval(obj.timer);&&& if (onEnd) {&&&& onEnd();&&& }&& }& }
&/javascript&3.页面div布局： 代码如下:&div class="pic" id="con"& &&&&&&& &table width="100%" border="0" cellpadding="0" cellspacing="0"&&&&&&&& class="table_01"&&&&&&&&& &c:choose&&&&&&&&&& &c:when test="${empty image_list}"&&&&&&&&&&& &tr style="height: 20px"&&&&&&&&&&&& &td colspan="2"&&&&&&&&&&&&& 暂时没有图片信息&&&&&&&&&&& &/td&&&&&&&&&&& &/tr&&&&&&&&&& &/c:when&&&&&&&&&& &c:otherwise&&&&&&&&&&& &%for (int i = 0; i & 3; i++) {%&&&&&&&&&&&& &tr&&&&&&&&&&& &c:forEach var="image" items="${image_list}"&&&&&&&&&&& begin="&%=i * 5%&" end="&%=(i + 1) * 5 - 1%&" varStatus="strs"&&&&&&&&&&&&&&& &td align="left"&&&&&&&&&&&&&&&&&&& &ul&&li class="conn"&&&&&&&&&&&&&&&&&&&&& &a onclick="aa(this.id)" id="s${strs.index }"&&&&&&&&&&&&&&&&&&&&&&&& &img class="conn" id="${strs.index }" style="height: 116width: 116px" src="&%=WholeProperties.IMAGE_IMAGE_URL %&/${image.imagePathSmall}" onclick="showPigDyt(this,${image.imagePathMiddle})" name="&%=WholeProperties.IMAGE_IMAGE_URL %&/${image.imagePathMiddle}"/&&/a&&& &&&&&&&&&&&&&&&&&& &/li&&/ul&&&&&&&&&&&&&& &ul&&&&&&&&&&&&&&&& &li style="line-height:20px"&&&&&&&&&&&&&&&&&& &input type="checkbox" id="upPicID" name="upPicID" value="${image.id }" /&&&&&&&&&&&&&&&&&& &c:choose&&&&&&&&&&&&&&&&&&&& &c:when test="${fn:length(image.imageName) & 6}"&& &&&&&&&&&&&&&&&&&&&&&& &c:out value="${fn:substring(image.imageName, 0, 6)}..." /&& &&&&&&&&&&&&&&&&&& &/c:when& &&&&&&&&&&&&&&&&&&& &c:otherwise&& &&&&&&&&&&&&&&&&&&&&&& &c:out value="${image.imageName}" /&& &&&&&&&&&&&&&&&&&&& &/c:otherwise& &&&&&&&&&&&&&&&&& &/c:choose&&&&&&&&&&&&&&&& &/li&&&&&&&&&&&&&&&& &li style="line-height:20px"&上传时间：&c:out value="${fn:substring(image.uploadTime,0,9)}"&&/c:out&&/li&&&&&&&&&&&&&&&& &li style="line-height:20px"&图片大小：${image.imageSize }&/li& &&&&&&&&&&&&&&&&&&&&&& &/ul&&&&&&&&&&&&&&&& &/td&&&&&&&&&&& &/c:forEach&&&&&&&&&&& &/tr&&&&&&&&&&&&&& &% } %&&&&&&&&&& &/c:otherwise&&&&&&&&& &/c:choose&&&&&&&& &/table&&&&&&& &/div&&&&&&& &div class="shadow_right"&&/div&&&&&&&&&&&&&&&&&&& &div class="pic_right"&&/div&&&&&&&&&&&&&&&&&&& &div id="bg"&&/div&&&&&&& &div id="bottom"&&&&&&&&& &ul&&&&&&&&&&& &li class="prev"&&/li&&&&&&&&&&&&&& &li class="img"&&/li&&&&&&&&&&&&&& &li class="next"&&/li&&&&&&&&&&&&&& &li class="close"&&/li&&&&&&&&&& &/ul&&&&&&& &/div&&&&&&&& &div id="frame"&&/div&&
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910▲ 哪个乌龟王八蛋老是攻击我这小站，有意思么？！狗日的特么闲着蛋疼啊！再特么黑我站点 诅咒全家死绝！
漂亮的JS滑动门式图片自动切换效果
　　CSS+JS滑动门式的图片轮番切换，原型是一个滑动门，又结合了图片特效，整体效果感觉挺不错，对JavaScript的学习帮助挺大。&&
&!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&&
&title&漂亮的JS滑动门式图片自动切换效果丨芯晴网页特效丨&/title&
&style type=&text/css&&
.ldh_fx_panel{width:667position:overflow:}
.ldh_fx_panel img{border:width:669height:414}
.ldh_fx_wrap{height:414overflow:}
.ldh_fx_nav{position:bottom:0width:110%;height:28}
.ldh_fx_nav a{display:float:display:width:132height:100%;line-height :28text-decoration:margin-right:2font:14px/2.2position:}
.ldh_fx_nav a .ldh_fx_link_bg{display:height:100%;background:#666;filter:Alpha(opacity=70);opacity:0.7;zoom:1;}
.ldh_fx_nav a .ldh_fx_link_txt{position:top:0;left:0;display:width:100%;text-align:cursor:color:#}
.ldh_fx_nav a:hover .ldh_fx_link_bg,.ldh_fx_nav a.hot .ldh_fx_link_bg{background:#}
.ldh_fx_nav a:hover .ldh_fx_link_txt,.ldh_fx_nav a.hot .ldh_fx_link_txt{color:#000}
&div class=&ldh_fx_panel&&
&div class=&ldh_fx_wrap& id=&ad_slide&&
&a href=&&&&img src=&/images/m01.jpg& alt=&& /&&/a&
&a href=&&&&img src=&/images/m02.jpg& alt=&& /&&/a&
&a href=&&&&img src=&/images/m03.jpg& alt=&& /&&/a&
&a href=&&&&img src=&/images/m04.jpg& alt=&& /&&/a&
&a href=&&&&img src=&/images/m05.jpg& alt=&& /&&/a&
&div class=&ldh_fx_nav& id=&ldh_fx_nav&&
&a href=&#nogo& &&span class=&ldh_fx_link_bg&&&/span&&span class=&ldh_fx_link_txt&&红叶传情&/span&&/a&
&a href=&#nogo& &&span class=&ldh_fx_link_bg&&&/span&&span class=&ldh_fx_link_txt&&野花绽放&/span&&/a&
&a href=&#nogo& &&span class=&ldh_fx_link_bg&&&/span&&span class=&ldh_fx_link_txt&&往事如茶&/span&&/a&
&a href=&#nogo& &&span class=&ldh_fx_link_bg&&&/span&&span class=&ldh_fx_link_txt&&油菜花开&/span&&/a&
&a href=&#nogo& &&span class=&ldh_fx_link_bg&&&/span&&span class=&ldh_fx_link_txt&&玫瑰情思&/span&&/a&
&script type=&text/javascript&&
function PicSlide(panel,opt){
this.panel=typeof panel==&string&?document.getElementById(panel):
for(var k in opt)this[k]=opt[k]
this.init()
PicSlide.prototype={
current:0,
timer:null,
type:'scroll',
act:'scroll',
interval:4000,
init:function (){
var _this=this,world=this.panel.parentN
this.imgs=this.panel.getElementsByTagName('A');
for(var i=0,l=this.imgs.i&l;i++)
this.imgs[i].style.cssText='position:display:'+(i==0?'':'none');
this.createTab();
this.interval=Math.max(this.interval,this.time);
world.onmouseover=function (){_this.hover=true};
world.onmouseout=function (){_this.hover=false};
this.auto()
createTab:function (){
var len=this.imgs.length,btn,_this=
this.nav=document.getElementById('ldh_fx_nav');
this.btns=this.nav.getElementsByTagName('A');
for(var i=0;i&i++){
btn=this.btns[i];
if(i==0)btn.className='hot';
btn.radioIndex=i;
btn.onmouseover=function (){_this.focus(this.radioIndex)}
focus:function (next){
next=next%this.imgs.
if(next==this.current)
this.btns[this.current].className='';
this.btns[next].className='hot';
this.fade(next);
fade:function (next){
var _this=
clearInterval(this.timer);
this.timer=this.fx(1,0,function (x){
_this.opacity( _this.imgs[_this.current],x)
},function (){
_this.imgs[_this.current].style.display='none';
_this.opacity(_this.imgs[next],0);
_this.imgs[next].style.display='';
_this.current=
_this.timer=_this.fx(0,1,function (x){
_this.opacity( _this.imgs[next],x)
},0,200,.5)
fx:function (f,t,fn,ed,tm,r){
var D=Date,d=new D,e,ed=ed||D,c=tm||300,r=r||5;
return e=setInterval(function (){
var z=Math.min(1,(new D-d)/c);
var stop=fn(+f+(t-f)*Math.pow(z,r),z);
if(z==1||false===stop)ed(clearTimeout(e))
opacity:function (el,n){
el.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+n*100+');';
if(n==1)el.style.filter=
el.style.opacity=n;
auto:function (){
var _this=
setInterval(function (){if(!_this.hover)_this.focus(_this.current+1)},this.interval);
var ldh_tb=new PicSlide('ad_slide',{type:'opacity'});
&br&&br&&hr&&p align=&center&&&font color=black&本特效由 &a href=&& target=&_blank&&芯晴网页特效&/a&丨 收集于互联网，只为兴趣与学习交流，不作商业用途。&/font&&/p&
提示：可以先修改部分代码后再运行
（本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.）
（本文由 |芯晴网页特效 收集丨）
------分隔线----------------------------
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...
JavaScript图片切换，带缩略图版，5屏图片幻灯，其实更多一些图片也是可以的，你只需...
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...
!--1、将下面的代码插入到HEML的head/head之间： -- script language=javaScript !--/...
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...js实现支持手机滑动切换的轮播图片效果实例-javascript编程
&&&&【提要】本篇《js实现支持手机滑动切换的轮播图片效果实例-javascript编程》特别为需要实现编程学习的朋友收集整理的，仅供参考。内容如下：
&&&&本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法。分享给大家供大家参考。具体如下：&&&&运行效果如下：&&&&&&&&完整实例代码点击此处。&&&&使用方法案例:&&&&-------------------------------------&&&&&script type="text/javascript" src="../src/zepto.js"&&/script&
&script type="text/javascript" src="../src/carousel-image.js"&&/script&
&script&$('.carousel-image').CarouselImage({num :$('.carousel-num')
&/script&&&&&或者requirejs：&&&&-------------------------------------&&&&&div class="carousel-image"&
&div&&a&&img src="/images/2.jpg"/&&/a&&a&&img src="/images/3.png"/&&/a&&a&&img src="/images/0.jpg"/&&/a&
&div class="carousel-num"&
&script type="text/javascript" src="../src/zepto.js"&&/script&
&script type="text/javascript" src="../src/require.js"&&/script&
requirejs.config({//By default load any module IDs from js/libbaseUrl: '../src',paths: {$: 'zepto'}
require(['carousel-image',"$"], function(CarouselImage,$) {var cs = new CarouselImage();cs.init({target:$('.carousel-image'),num:$('.carousel-num')});
&/script&&&&&API 属性、方法及回调：&&&&target:&&&&表示是在这个容器内的元素会触发事件,它应该有个子级的容器，方便动画的优化&&&&num:&&&&本意是以显示当前索引的数字表示，但现在用样式把数字隐藏了，如果要显示数字样式，可自行更改样式文件&&&&希望本文所述对大家的javascript程序设计有所帮助。&&&&……
特别声明：当前位置： >
> &左右滑动带滚动条和正文
左右滑动带滚动条和方向按钮的js图片滚动代码
js图片滚动插件，下方是滚动条，左右两边是向左向右按钮，一共7屏，将鼠标放到滚动条上转动中间的齿轮也可以滚动。不支持增加图片，支持浏览器：IE6+等浏览器。
1、在head区域引入下面的css文件和js文件：
&link href="css/5imoban.net.css" type="text/css" rel="stylesheet" /&
&script src="js/5imoban.net.js"&&/script&
2、在body区域引入下面的html代码和menu.js：
&div id="ztbox"&
&div id="left"&&/div&
&div id="conter"&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b1.png" /&&/a&&/li&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b2.png" /&&/a&&/li&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b3.png" /&&/a&&/li&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b4.png" /&&/a&&/li&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b5.png" /&&/a&&/li&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b6.png" /&&/a&&/li&
&li&&a href="http://www.5imoban.net" target="_blank"&&img src="images/b7.png" /&&/a&&/li&
&div id="scroll"& &span&&/span& &/div&
&div id="right"&&/div&