从左向右幻灯片切换有点一像看书一样的效果，很多商城是用这种，我们先来看看效果图片。
我们切换一下效果如下
不错吧，下面来分析实现代码。
jquery代码（jquery文件大家可以到官网去下载，这里不提供）
| 代码如下 | 复制代码 |
|
<script type="text/javascript" src="/jquery-1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var dt=$(".aa dt"); var dd=$(".aa dd"); var space=526;//图片宽度 var tw=35;//标题宽度 var len=dt.length;//标题个数 var leftArray=new Array();//标题left数组 var rightArray=new Array();//标题right数组 var dlArray=new Array();//图片left数组 var drArray=new Array();//图片right数组 //元素初始化 for(i=0;i<len;i++){ $(dt[i]).css({"left":i*tw+"px","z-index":i});//标题left及z轴设置 $(dd[i]).css({"left":(i+1)*tw+"px","z-index":i});//图片left及z轴设置 $(dt[i]).attr("title",i);//标题添加title，主要解决i的闭包问题 leftArray[i]=i*tw;//计算标题的左侧left位置数组 rightArray[i]=leftArray[i]+space;//计算标题右侧的left位置数组 dlArray[i]=(i+1)*tw;//计算图片左侧left位置数组 drArray[i]=(tw*len+space)-(len-i-1)*tw;//计算图片右侧left位置数组 //加载鼠标经过事件 $(dt[i]).mouseover(function(){ mT=parseInt($(this).attr("title")); $(dt[mT]).css({"background-position":-(mT*tw)+"px -160px"}); moveAll(mT); }); //鼠标移除后改变图片背景 $(dt[i]).mouseout(function(){ $(dt[mT]).css({"background-position":-(mT*tw)+"px 0px"}); }); } //主体运动函数 function moveAll(mT){ //鼠标经过时停止全部动画，防止连续移动鼠标造成动画不连贯的问题 for(j=0;j<len;j++){ $(dt[j]).stop(); $(dd[j]).stop(); } //鼠标【当前标题】右侧的标题像右移动 for(m=mT;m<len;m++){ $(dt[m+1]).animate({"left":rightArray[m+1]+"px"},"slow"); $(dd[m+1]).animate({"left":drArray[m+1]+"px"},"slow"); } //鼠标【当前标题】左侧的图标向左移动 for(n=0;n<mT;n++){ $(dt[n+1]).animate({"left":leftArray[n+1]+"px"},"slow"); $(dd[n+1]).animate({"left":dlArray[n+1]+"px"},"slow"); } } }); </script> |
|
css文件代码
| 代码如下 | 复制代码 |
|
<style type="text/css"> *{margin:0;padding:0;border:0;} .aa{width:701px;height:160px;overflow:hidden;position:relative;border:1px #eee solid;} .aa dt{width:35px;height:160px;overflow:hidden;position:absolute;background:url(images/20125/102145/title.png) no-repeat 0 0;} .aa dd{width:526px;height:160px;overflow:hidden;position:absolute;} dt.t1{background-position:0 top;} dt.t2{background-position:-35px top;} dt.t3{background-position:-70px top;} dt.t4{background-position:-105px top;} dt.t5{background-position:-140px top;} dt.t6{background-position:-170px top;} </style> |
|
html代码
| 代码如下 | 复制代码 |
|
<div class="aa"> <dl> <dt class="t1"></dt> <dd><img src="/102145/U3405P704T1D718F3DT20110114172515.jpg"></dd> <dt class="t2"></dt> <dd><img src="/102145/U246P704T108D47F4566DT20101119111422.jpg"></dd> <dt class="t3"></dt> <dd><img src="/102145/U246P704T108D47F4567DT20101119111422.jpg"></dd> <dt class="t4"></dt> <dd><img src="/102145/U246P704T108D47F4569DT20101119111422.jpg"></dd> <dt class="t5"></dt> <dd><img src="/102145/U3405P704T108D47F4570DT20101224165618.jpg"></dd> </dl> </div> |
|
这个效果分类三部份，一是css部份控制布局的一个是js部份这也是我们的主要核心部份了，最后就是html的div了，这个很简单，只要按上面的来做就可以实现你想要的幻灯片效果了。
时间： 2024-09-28 10:56:42