zoukankan      html  css  js  c++  java
  • 轮播图适应代码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存放图片,

  • 相关阅读:
    HDFS 2.X新特性
    kettle的系列教程
    Kettle基本使用
    MySQL流程控制结构
    MySQL函数
    MySQL存储过程和函数
    MySQL变量
    MySQL视图
    TCL(事务控制语言)
    MySQL标识列(自增长列)
  • 原文地址:https://www.cnblogs.com/xingst/p/5035400.html
Copyright © 2011-2022 走看看