Carousel simple map production template (notes)

HTML

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title> 广告图片轮播切换</title>
		<link rel="stylesheet" href="css/style.css">

	</head>
	<body>
		<div class="adver">
			<!--  轮播图 -->
			<ul >
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<div class="arrowLeft">
			<</div>
			<div class="arrowRight">>
			</div>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

CSS

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
    position: absolute;
    width: 30px;
    background:rgba(0,0,0,0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top:200px;
    z-index: 150;
    font-family: "΢���ź�";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
    background: orange;
}

JS: Note that the address of the picture is specially treated, the user can set up their own projects according to the picture address in order to be able to show up effects prevail

//使用数组记录文件名
var img = ['adver01', 'adver02', 'adver03', 'adver04', 'adver05', 'adver06'];

var flag = 0;

var t = setInterval('time()', 2000)
	//当鼠标悬停在大盒子左右两边出现小盒子
	$(function() {
			//鼠标移入
			$('.adver').mouseover(function() {
				$('.arrowLeft').show();
				$('.arrowRight').show();
				// 设置鼠标移入，轮播暂停
				window.clearInterval(t);
			});
			//鼠标离开
			$('.adver').mouseout(function() {
				$('.arrowLeft').hide();
				$('.arrowRight').hide();
				//鼠标移开后 自动恢复自动播放
				t = setInterval('time()', 2000);
			});
			//点击右侧按钮的时候切换图片
			$('.arrowRight').click(function() {
				if (flag == 5) {
					flag = 0;
				} else {
					flag++; //往前走
				}
				var i = flag + 1;
				$('.adver').css({
					'background': 'url(images/' + img[flag] + '.jpg)'
				});

				//无序列表需要 切换
				$('li:nth-of-type(' + i + ')')
					.css({
						'background': 'orange'
					}).siblings()
					.css({
						'background': '#333333'
					});
				//siblings()找到所有同级别的兄弟元素
			});

			// 点击左边按钮的时候切换图片
			$('.arrowLeft').click(function() {
				if (flag == 0) {
					flag = 5;
				} else {
					flag--; //往前走
				}
				var i = flag + 1;
				$('.adver').css({
					'background': 'url(images/' + img[flag] + '.jpg)'
				});
				//无序列表需要 切换 被选中背景颜色的li是橙色,没有被选中的其他标签是黑色的
				$('li:nth-of-type(' + i + ')')
					.css({
						'background': 'orange'
					}).siblings()
					.css({
						'background': '#333333'
					});
				//siblings()找到所有同级别的兄弟元素
			});

			$('li').click(function() {
				var i = parseInt(($(this).text()) - 1);
				flag = i;

			$('.adver').css({
				'background': 'url(images/' + img[flag] + '.jpg)'
			});

				//无序列表 切换
				$('li:nth-of-type(' + (flag + 1) + ')').css({
					'background': 'orange'
				}).siblings().css({
					'background': '#333333'
				});
			});

});
			//实现轮播图滚动
			function time() {
				if (flag == img.length - 1) {
					flag = 0;
				} else {
					flag++;
				}
				//图片切换
				$('.adver').css({
					'background': 'url(images/' + img[flag] + '.jpg)'
				});
				//无序列表切换
				$('li:nth-of-type(' + (flag+1) + ')')
					.css({
						'background': 'orange'
					}).siblings()
					.css({
						'background': '#333333'
					});
					
					//实现轮播图片跟走
					$('li').click(function() {
						var i = parseInt(($(this).text()) - 1);
						flag = i;
					
					$('.adver').css({
						'background': 'url(images/' + img[flag] + '.jpg)'
					});
					
						//无序列表 切换
						$('li:nth-of-type(' + (flag + 1) + ')').css({
							'background': 'orange'
						}).siblings().css({
							'background': '#333333'
						});
					});
			}

^Truth

Published 108 original articles · won praise 46 · views 30000 +

Private letter concerns

Carousel simple map production template (notes)

Guess you like