jquery轮播图带圆点

最新推荐文章于 2024-02-20 00:03:41 发布

原创最新推荐文章于 2024-02-20 00:03:41 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jquery #css

jquery 同时被 2 个专栏收录

8 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

本文介绍如何利用HTML、CSS和jQuery创建一个带圆点切换效果的轮播图，通过jQuery代码实现图片的自动轮播及圆点导航功能。

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			/* 让body有20px的内边距 */
			body{
				padding: 20px;
			}
			li{
				list-style: none;
			}
			#container{
				width: 400px;
				height: 250px;
				overflow: hidden;
				position: relative;
				margin: 0 auto;
			}
			#list{
				height: 250px;
				width: 2800px;
				position: absolute;
				z-index: 1;
				left: -400px;
			}
			#list img{
				float: left;
			}
			#pointsDiv{
				position: absolute;
				height: 10px;
				width: 100px;
				z-index: 2;
				bottom: 20px;
				left: 200px;
			/* 	background-color: red; */
				
			}
		#pointsDiv span {
		 cursor: pointer;
		  float: left;
		border: 1px solid rgb(255,255,255);
		  width: 10px;
		  height: 10px;
		border-radius: 50%;
		  background-color: rgb(42, 34, 90);
		  margin-right: 5px;
		}
		.arrow{
			position: absolute;
			z-index: 99;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 39px;
			background-color: rgba(0,0,0,0.3);
			top: 120px;
			text-decoration: none;
			color: aliceblue;
		}
		#pre{
			left: 20px;
		}
		#next{
			right: 20px;
		}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="list">
				<li><img src="img2/5.jpg" ></li>
				<li><img src="img2/1.jpg" ></li>
				<li><img src="img2/2.jpg" ></li>
				<li><img src="img2/3.jpg" ></li>
				<li><img src="img2/4.jpg" ></li>
				<li><img src="img2/5.jpg" ></li>
				<li><img src="img2/1.jpg" ></li>
			</div>
			<div id="pointsDiv" >
				<span index="1" class="on"></span>
				<span index="2" ></span>
				<span index="3" ></span>
				<span index="4" ></span>
				<span index="5" ></span>
			</div>
			<a href="#" id="pre" class="arrow">&lt; </a>
			<a href="#" id="next" class="arrow">&gt;</a>
		
		</div>
	</body>
</html>
<script src="jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<script src="app1.js" type="text/javascript" charset="utf-8"></script>

app1.js代码

$(function(){
	$list = $('#list');
	// 一页的宽度
	var pageWidth = 400;
	var moveing = false;
	var time = 1000;
	var itemtime = 50;
	var itemcount = 0;
	var $points = $('#pointsDiv>span');
	
	$('#pre').click(function(){
		nextPage(false);
		return true
	})
	$('#next').click(function(){
		nextPage(true)
		return true
	})
	
	//自动翻页
	var changePage_timer = setInterval(function(){
		
		nextPage(true)
	},1000)
	//移入鼠标取消自动翻页
	$('#container').hover(function(){
		clearInterval(changePage_timer);
	},function(){//鼠标移出开始自动翻页
		changePage_timer = setInterval(function(){
			nextPage(true)
		},1000)
	});
	//全局变量index 是为了后面点击圆点切换图片时用
	var index = 0;
	$points.click(function(){
		
		index = $(this).attr('index');
		var targetoffset = (-index)*pageWidth;
		nextPage(targetoffset);
		
		
	})
	//给第一个圆点设置背景色
	$($points[0]).css('background-color','red')
	//圆点背景色变换,precount记录下标变换之前的下标,itemcount记录变换后的下标
	function chanagePonits_color(precount){
		if(precount !=itemcount){//放进条件判断是为了避免出现2次点击相同的，相同的不做处理
			$($points[itemcount]).css('background-color','red');
					
			$($points[precount]).css('background-color','');
			
		}
			
	}
	function nextPage(next){
		//避免双击BUG 弄个阻断 同时只能运行一个点击,
		if(moveing){
			return
		}
		moveing = true;
		//precount 记录下标变换之前的图片下标
		var precount = itemcount;
		var offset = 0;
		//获取现在显示图片的left的值，然后改变left来变换
		var currentleft = $list.position().left;
		//next值有true false类型  或者
		if(typeof next==='boolean'){
			offset = next ? -pageWidth : pageWidth;
			itemcount = next ? itemcount+1 : itemcount -1;
			//目标偏移量
			var targetleft = currentleft+offset;
		}else{
			//目标位置  后面好比较 到达目标位置停止 79行
			targetleft = next;
			//这里转换next是为了下面好用,点击圆点获取的index>itemcount+1记录的图片下标代表要翻页
			next = index>=(itemcount+1) ?true :false;
			offset = (itemcount-index+1)*pageWidth;
			//更改所在位置下标
			itemcount = index-1;
			
		}
		
		// 单元偏移量
		var itemoffset = offset/(time/itemtime);
		
		// 设置定时器
		var timer1 = setInterval(function(){
			 currentleft += itemoffset;
			
				
			if((currentleft <= targetleft && next) || (currentleft>= targetleft && !next)){
				 	currentleft = targetleft;
				 	clearInterval(timer1);
				 	moveing = false;
				 	//避免双击到最后一个图片出现的BUG
				 	if(currentleft<=-2400 && next ){
				 		currentleft = -400;
				 		itemcount = 0
				 	}else if(currentleft>=0 && !next ){//处理第一个图片
				 		currentleft = -2000;
				 		itemcount = 4
				 	}
					chanagePonits_color(precount);
					

				 }

			$list.css('left',currentleft);
			
		

		},itemtime);
	}
});