Giter VIP home page Giter VIP logo

carouselbyjquery's Introduction

carouselByJquery

这是一个利用jquery语句实现轮播图的效果,代码少,易理解,设置了定时器,我的js代码为: $(function (){ // 获取轮播图中所有的图片 var $imgs = $('#carousel img'); // 定义一个公用的index,用于记录轮播到第几张了 var index = 0; // 定义一个主轮播函数,进行轮播和index 的管理 function carousel(){ // 每次轮下一张 index++; // 最后一张轮完回到第一张 if(index == $imgs.size()){ index = 0; } // 设置a标签的导航 setNav(index); // 将第index张图片显示,同时其他图片隐藏 $imgs.eq(index).fadeIn(500).siblings("img").fadeOut();

			}
			// 设置定时器,每2s轮播一次
			var timer = setInterval(carousel, 2000);
			
			// 定义一个函数用于设置轮播图的导航
			function setNav(ind){
				// 根据参数ind设置导航中第ind个a标签的背景为红色,而取消其他a标签的背景
				$('.nav a').eq(ind).addClass('active').siblings().removeClass();
			}
			
			// 给轮播导航添加点击事件
			$(".nav a").click(function (){
				// 停止轮播
				clearInterval(timer);
				// 获取点击的是第几个a标签, 将公共的index设置为这个几
				index = $(this).index();
				// 将对应的图片淡入,其他图片淡出
				$imgs.eq(index).fadeIn(500).siblings("img").fadeOut();
				// 同时将自己的背景设为红色,其他导航用a标签背景取消
				$(this).addClass('active').siblings().removeClass();
				// 继续从指定的图片开始轮播
				timer = setInterval(carousel, 2000);
			});
			
		});

carouselbyjquery's People

Contributors

qimengke avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.