jq+html+css实现普通的轮播图

//首先要在head中引入jq，大家可自行下载到项目中
<script src="./js/jquery.min.js"></script>
            //html代码
               <div class="banner">
					<div class="pic">
						<ul>
							<li><a><img src="./images/banner-1@2x.png" class="banner_1"></a></li>
							<li><a>	<img src="./images/banner-2.jpg" class="banner_1"></a></li>
							<li><a>	<img src="./images/banner-3.jpg" class="banner_1"></a></li>
							<li><a>	<img src="./images/banner-4.jpg" class="banner_1"></a></li>
						</ul>
						<!--箭头-->
						<div class="arrow">
							<span class="arrow-left">&lt;</span>
							<span class="arrow-right">&gt;</span>
						</div>
					</div>
					<div class="dot">
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
				</div>


//js代码
<!-- 轮播图 -->
	<script>
		$(function() {
			var num = 0;
			var timer;
			var hasStarted = false;
			$(".banner .arrow-left").click(function() {
				stop();
				--num;
				num = num % $(".pic li").size();
				showpic(num);
			});
			$(".banner .arrow-right").click(function() {
				stop();
				++num;
				num = num % $(".pic li").size();
				showpic(num);
			});

			function showpic(index) {
				$(".pic li").eq(index).show().siblings().hide();
				$(".dot li").eq(index).css("background", "#f8605f").siblings().css("background", "#fff");
			}

			$(".dot li").hover(function() {
				stop();
				num = $(this).index();
				$(".pic li").eq(num).show().siblings().hide();
				$(this).css("background", "#f8605f").siblings().css("background", "#fff");
			}, start);
			$(".pic li").each(function(index) {
				$(this).hover(function() {
					stop();
					// show(index);
					num = index + 1;
				}, start)
			});

			function start() {
				if (!hasStarted) {
					hasStarted = true;
					timer = setInterval(function() {
						showpic(num);
						num++;
						if (num == $(".pic li").size()) {
							num = 0;
						}
					}, 2000);
				}
			}

			function stop() {
				clearInterval(timer);
				hasStarted = false;
			}
			start();
		});
	</script>