2个不同的图片效果,可以用焦点图

2个不同的图片效果,可以用焦点图

2个不同的图片效果,可以用焦点图

 

XML/HTML Code
  1. <div id="rondellSlider">  
  2.   <img src="images/slider/pic1.png" alt="unicorn" title="A beautiful unicorn">  
  3.   <img src="images/slider/pic2.png" alt="swan" title="Swan on the alpsee">  
  4.   <img src="images/slider/pic3.png" alt="landscape" title="Great landscape">  
  5.   <img src="images/slider/pic4.png" alt="mountains" title="Austrian mountains">  
  6. </div>  
 

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     (function() {  
  3.       $(function() {  
  4.         return $('#rondellSlider > *').rondell({  
  5.           preset: 'slider'  
  6.         });  
  7.       });  
  8.       
  9.     }).call(this);  
  10.     </script>  

 


原文地址: http://www.freejs.net/article_jquerytupiantexiao_153.html
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用jQuery插件来实现这个效果,其中比较流行的是jQuery EasyTabs和jQuery jCarousel。 首先,您可以使用EasyTabs插件来添加选项卡切换功能。这个插件可以让您将内容分成多个选项卡,并在用户点击选项卡时显示相应的内容。您可以使用以下HTML代码来创建选项卡: ``` <div class="tabs"> <ul class="tab-navigation"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab1"> Content for tab 1 goes here. </div> <div id="tab2"> Content for tab 2 goes here. </div> <div id="tab3"> Content for tab 3 goes here. </div> </div> </div> ``` 然后,您可以使用jCarousel插件来创建左右滚动焦点。这个插件可以让您将多张图片以水平或垂直方向进行滚动,还可以添加左右按钮进行控制。您可以使用以下HTML代码来创建滚动焦点: ``` <div class="jcarousel"> <ul> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li> <li><img src="image3.jpg" alt="Image 3"></li> <li><img src="image4.jpg" alt="Image 4"></li> </ul> <a href="#" class="jcarousel-prev">‹</a> <a href="#" class="jcarousel-next">›</a> </div> ``` 最后,您可以将EasyTabs和jCarousel结合起来,使用以下代码来实现您所需的效果: ``` $(document).ready(function() { $('.tabs').easytabs(); // 初始化选项卡 $('.jcarousel').jcarousel(); // 初始化滚动焦点 }); ``` 您还可以使用jCarousel的其他选项来自定义滚动焦点的外观和行为,例如更改滚动速度、添加自动滚动、添加循环滚动等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值