• 轮播图适应代码jQ


    (function(){
    		var i = 0;
    		var time ;
    		$('.page-size').html('1');
    		var obj = $('.xst-scroll>li');
    		var imgChange  =  function(){
    			$('.page-size').html(i+1);
    			obj.animate({
    				opacity: '0'},
    				100, function() {
    				obj.css({
    					display: 'none'
    				});
    				obj.eq(i).css({
    					display: 'block'
    				});
    				obj.eq(i).animate({
    					opacity: '1'},
    					100);
    			});
    		}
    		var imgAuto = function(){
    			i++;
    			if(i>=obj.length){
    				i=0;
    			};
    			imgChange();
    		}
    		var imgLeft = function(){
    			clearInterval(time);
    			i--;
    			if(i<0){
    				i=obj.length-1;
    			}
    			imgChange();
    			time = setInterval(imgAuto, 5000);
    		}
    		var imgRight = function(){
    			clearInterval(time);
    			i++;
    			if(i>=obj.length){
    				i=0;
    			};
    			imgChange();
    			time = setInterval(imgAuto, 5000);
    		}
    		$('.page-sum').html(obj.length);
    		time = setInterval(imgAuto, 5000);
    		$('.previous').click(function(event) {
    			imgLeft();
    		});
    		$('.next').click(function(event) {
    			imgRight();
    		});
    	})();
    	//轮播图代码
    

      使用说明:.page-size显示当前页码(第几张图),.page-sum显示总共页码(共几张图);.previous上一张,.next下一张,.xst-scroll>li存放图片,

  • 相关阅读:
    安卓第四周作业
    安卓作业。
    JSP第七周作业
    jsp第六周作业
    JSP第四周作业
    JSP第二次
    软件测试课堂练习
    JSP第一次
    Android页面
    Android作业
  • 原文地址:https://www.cnblogs.com/xingst/p/5035400.html
Copyright © 2020-2023  润新知