zoukankan      html  css  js  c++  java
  • jQuery前后滚动洗牌式图片展示效果

    jQuery前后滚动洗牌式图片展示效果

    点击左右键时会实现图片像洗扑克牌切换式的效果。

    用法:

    1.引入jQuery类库和相关js库

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.corner.js"></script>
    <script type="text/javascript" src="js/jquery.roundabout.js"></script>
    <script type="text/javascript" src="js/jquery.roundabout-shapes.js"></script>

    2.定义效果内容:

    <div id="gla">
    	<div id="gla_box">
    		<span class="prev">&nbsp;</span>
    		<span class="next">&nbsp;</span>
    		<ul>
    			<li>
    				<div class="gla_inbox">
    					<p>电脑外包服务</p>
    					<img src="images/20120814204816.jpg" />
    					<a href="http://www.jqdemo.com/">点击了解详情</a>
    				</div>
    			</li>
    			<li>
    				<div class="gla_inbox">
    					<p>网络外包服务</p>
    					<img src="images/20120814204750.jpg" />
    					<a href="http://www.jqdemo.com/">点击了解详情</a>
    				</div>
    			</li>
                     </ul>
    	</div>
    </div>

    3.最后调用插件提供的方法:

    $(function(){
    		   
    	$('.gla_inbox').corner('8px');
    	
    	$('#gla_box>ul').roundabout({
    		minOpacity:1,
    		btnNext: ".next",
    		duration: 1000,
    		reflect: true,
    		btnPrev: '.prev',
    		autoplay:true,
    		autoplayDuration:5000,
    		tilt:0,
    		shape: 'figure8'
    	});
    	
    });

    原文转自:jQuery前后滚动洗牌式图片展示效果

  • 相关阅读:
    Qt环境搭建(Visual Studio)
    HTML基础
    关于Qt
    I am back
    Node Security
    Mobile Assistant
    Home Server
    抉择-什么最重要
    在一个JSP页面中包含另一个JSP页面的三种方式
    JS控制DIV隐藏显示
  • 原文地址:https://www.cnblogs.com/jqdemo/p/3118309.html
Copyright © 2011-2022 走看看