jquery全屏响应式图片轮播特效

此作品实现了jquery全屏响应式图片轮播特效，默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。

分类：图片代码 > 图片插件难易：初级

查看演示下载资源下载积分： 20 积分

首先引用文件

<link href="views/css/all.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="views/js/jquery.easing.js" type="text/javascript"></script>
<script src="views/js/studio.js" type="text/javascript"></script>

核心jquery代码如下：

//显示图片函数，根据接收的index值显示相应的内容 
function showPics(index) { 
    //根据index值计算ul元素的left值 
    var nowLeft = -index * imgWidth; 
    //通过animate()调整ul元素滚动到计算出的position 
    $('.ps_box .pb').stop(true, false).animate({ 
        "marginLeft": nowLeft 
    }, 
    1000, 'easeInOutExpo'); 
    //为当前的按钮切换到选中的效果  
    $('.ps_box .pics_switch_clients ul li span').stop(true, false).animate({ 
        "opacity": "0.4" 
    }, 
    600).eq(index).stop(true, false).animate({ 
        "opacity": "1" 
    }, 
    600); 

}