jquery选择器_基于jquery带翻页按钮的图片幻灯切换效果

先看效果图,我用红色框框起来的左右按钮。

下面我们来分析代码这是css文件

 代码如下 ul,li{margin:0;padding:0;}
img {border:none;}
ul li{list-style:none;}
.sx,#idSlider,#idSlider img{width:400px;height:230px;overflow:hidden;}
.sx {position:relative;}
#shang,#xia{position:absolute;z-index:19;width:24px;height:230px;text-align:center;line-height:230px;background-color:#fff;top:0;text-decoration:none;font-size:12px;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}
#shang{left:0px;}
#xia{right:0px;}
#shang:hover,#xia:hover{opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}

html代码

 

 代码如下
 

  
  
  
 
 <<
 >>


jquery代码

 

 代码如下 <script type="text/javascript" src="/Tween.js"></script>
<script type="text/javascript" src="/XScroll.js"></script>
<script type="text/javascript">
//delay：自动滚动间隔时间，默认为4000
//how参数指定切换效果：0－淡入淡出，1－两张图片同时滚动，2－当前图片不动、下一张图片覆盖上来，3－当前图片飞走、显示出下一张
//direct参数指定方向：0123分别表示左上右下（当how不为0时有效）
var sx=XScroll("idSlider",{delay:5000,how:3,direct:3,auto:false });
(function(){
 var shang=_.id("shang"),xia=_.id("xia");
 shang.onclick=function(){
  sx.Prev();
 }
 xia.onclick=function(){
  sx.Next();
 }
})()
</script>

 

整个实例代码如下

 代码如下






 


  
  
  
 
 <<
 >>

<script type="text/javascript" src="/Tween.js"></script>
<script type="text/javascript" src="/XScroll.js"></script>
<script type="text/javascript">
//delay：自动滚动间隔时间，默认为4000
//how参数指定切换效果：0－淡入淡出，1－两张图片同时滚动，2－当前图片不动、下一张图片覆盖上来，3－当前图片飞走、显示出下一张
//direct参数指定方向：0123分别表示左上右下（当how不为0时有效）
var sx=XScroll("idSlider",{delay:5000,how:3,direct:3,auto:false });
(function(){
 var shang=_.id("shang"),xia=_.id("xia");
 shang.onclick=function(){
  sx.Prev();
 }
 xia.onclick=function(){
  sx.Next();
 }
})()
</script>

 

总结：自达有了jquery这东西后我们做起js特效来就特别容易了，效果就更加逼真更好看了。

jquery选择器_基于jquery带翻页按钮的图片幻灯切换效果

http://m.bbyears.com/wangyezhizuo/34479.html

推荐访问:jquery面试题 jquery教程