master

分支 (1)

管理

管理

master

black
/
jQuery 轮播.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0 auto;
				padding: 0;
				list-style: none;
			}

			.box {
				position: relative;
				width: 450px;
				height: 300px;
			}

			.box1 {
				width: 450px;
				height: 300px;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
			}

			.item li {
				width: 450px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				display: none;
				opacity: 1;
			}

			.item1 {
				position: absolute;
				top: 0;
				left: 0;
			}

			.item1 li {
				width: 450px;
				height: 300px;
				float: left;
			}

			.leftBtn {
				width: 30px;
				height: 60px;
				position: absolute;
				left: 0;
				top: 120px;
			}

			.rightBtn {
				width: 30px;
				height: 60px;
				position: absolute;
				right: 0;
				top: 120px;
			}

			.leftBtn1 {
				width: 30px;
				height: 60px;
				position: absolute;
				left: 0;
				top: 120px;
			}

			.rightBtn1 {
				width: 30px;
				height: 60px;
				position: absolute;
				right: 0;
				top: 120px;
			}

			img {
				width: 100%;
				height: 100%;
			}

			.page {
				position: absolute;
				bottom: 50px;
				left: 150px;
				height: 30px;
			}

			.page li {
				float: left;
				width: 30px;
				height: 30px;
				list-style: none;
				background: pink;
				border-radius: 100%;
				line-height: 30px;
				text-align: center;
			}

			.page li.active {
				background: #fff;
			}

			.page1 {
				position: absolute;
				bottom: 50px;
				left: 150px;
				height: 30px;
			}

			.page1 li {
				float: left;
				width: 30px;
				height: 30px;
				list-style: none;
				background: pink;
				border-radius: 100%;
				line-height: 30px;
				text-align: center;
			}

			.page1 li img {
				position: absolute;
				left: 0;
				top: 0;
			}

			.page1 li.active {
				background: #fff;
			}

			#Btn {
				display: none;
			}

			.box:hover #Btn {
				opacity: .6;
				display: block;
			}
			.box1:hover #Btn {
				opacity: .6;
				display: block;
			}
		</style>
		<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>

		<!--JD轮播-->
		<script>
			$(function() {
				var size = $('.item li').size();
				for(var i = 1; i < size + 1; i++) { //循环遍历每张图片
					var li = '<li>' + i + '</li>';
					$('.page').append(li); //创造li
				}
				$('.item li').first().show(); //第一个隐藏的显示
				$('.page li').first().addClass('active');

				//手动轮播
				$('.page li').mouseover(function() {
					$(this).addClass('active').siblings().removeClass('active'); //给page添加active类名
					var index = $(this).index();
					i = index;
					$('.item li').eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
				})
				//向左运动函数
				function moveL() {
					i--;
					if(i == -1) i = size - 1;
					$('.page li').eq(i).addClass('active').siblings().removeClass('active'); //这个是下方的小圆圈
					$('.item li').eq(i).fadeIn('slow').siblings().fadeOut('slow'); //在这里是循环遍历出每张图片
					//获取下标（索引）然后控制淡入 淡出时间
				};
				/*自动播放*/
				var i = 0;
				var j = setInterval(moveR, 1500);
				//向右运动函数
				function moveR() {
					i++;
					if(i == size) i = 0;
					$('.page li').eq(i).addClass('active').siblings().removeClass('active');
					$('.item li').eq(i).fadeIn('slow').siblings().fadeOut('slow');
				};
				$('.box').hover(function() {
					clearInterval(j);
				}, function() {
					t = setInterval(moveR, 1500);
				})
				$('.leftBtn').mousedown(function() {
					moveL();
				})
				$('.rightBtn').mousedown(function() {
					moveR();
				})
			})
		</script>

		<!--淘宝轮播-->
		<script>
			$(function() {
				var i = 0;
				var timer = null;
				var firstimg = $('.item1 li').first().clone(); //复制第一张图片
				$('.item1').append(firstimg).width($('.item1 li').length * ($('.item1 img').width()));
				//将复制的第一张图片 添加到列表里

				for(var j = 0; j < $('.item1 li').length - 1; j++) {
					var li = '<li>' + j + '</li>';
					$('.page1').append(li)


				}
				$('.page1 li').first().addClass('active');

				$('.rightBtn1').mousedown(function() { //右击切换
							movetoR()
				})

				function movetoR(){
						i++
					console.log(i)
					if(i == $('.item1 li').length) {

						i = 1
						$('.item1').css({
							left: 0
						});
					}
					$('.item1').stop().animate({
						left: -i * 450
					}, 300);

					if(i == $('.item1 li').length - 1) {
						$('.page1 li').eq(0).addClass('active').siblings().removeClass('active');
					} else {
						$('.page1 li').eq(i).addClass('active').siblings().removeClass('active');
					}
				}

				$('.leftBtn1').mousedown(function() {
					i--;
					console.log(i)
					if(i == -1) {
						i = $('.item1 li').length - 2;

						$('.item1').css({
							left: -($('.item1 li').length - 1) * 450
						})
					}
					$('.item1').stop().animate({
						left: -i * 450
					}, 300);
					$('.page1 li').eq(i).addClass('active').siblings().removeClass('active');

				})
				var t = setInterval(movetoR, 1500);
				$('.box1').hover(function(){
					clearInterval(t)
				})


			})
		</script>
	</head>

	<body>

		<!--	JD轮播-->
		<div class="box">
			<ul class="item">
				<li><img src="images/1.jpg"></li>
				<li><img src="images/2.jpg"></li>
				<li><img src="images/3.jpg"></li>
				<li><img src="images/4.jpg"></li>
				<li><img src="images/5.jpg"></li>
				<li><img src="images/6.jpg"></li>
			</ul>
			<button id="Btn" class="leftBtn">&lt;</button>
			<button id="Btn" class="rightBtn">&gt;</button>

			<ul class="page">

			</ul>

		</div>

		<!--淘宝轮播-->
		<div class="box1">
			<ul class="item1">
				<li><img src="images/1.jpg"></li>
				<li><img src="images/2.jpg"></li>
				<li><img src="images/3.jpg"></li>
				<li><img src="images/4.jpg"></li>
				<li><img src="images/5.jpg"></li>
				<li><img src="images/6.jpg"></li>
			</ul>
			<button id="Btn" class="leftBtn1">&lt;</button>
			<button id="Btn" class="rightBtn1">&gt;</button>

			<ul class="page1">

			</ul>

		</div>

	</body>

</html>