图片轮播的JS和CSS实现

JS实现方法：

//实现自动轮播
function autoMove() {
	if (n >= (count - 1)) {
		n = 0;
	} else {
		++n;
	}
	$(".body1 .adver ul li").eq(n).trigger("click"); //触发点击事件
}

function picRoll() {
    //为不同图片设置不同背景色
	var colors = ["#fea477", "#baddd6", "#ff7473", "#4695d6", "#8B88FF", "#6599FF"];
	var index = 0;
	count = $(".body1 .adver a").length;
	var color = "";
    //隐藏轮播元素的非第一个元素
	$(".body1 .adver a:not(:first-child)").hide();

    //设置点击按钮轮播下一张图片
	$(".body1 .adver .glyphicon-menu-left").click(function() {
		if (index !== 0) {
			index = index - 1;
		} else {
			index = 5;
		}
        //获取下一张图片的索引
		n = index;
		color = colors[n];
        
        //设置图片背景色
		$(".part1").css({
			"background": "linear-gradient(" + color + ", white, white)"
		});

        //实现图片切换，触发小圆点的click事件
		$(".body1 .adver a").eq(n + 1).fadeOut();
		$(".body1 .adver a").eq(n).fadeIn();
		$(".body1 .adver ul li").eq(n).trigger("click");
	});

	$(".body1 .adver .glyphicon-menu-right").click(function() {
		if (index !== 5) {
			index = index + 1;
		} else {
			index = 0;
		}
		n = index;
		color = colors[n];
		$(".part1").css({
			"background": "linear-gradient(" + color + ", white, white)"
		});

		$(".body1 .adver a").eq(n - 1).fadeOut();
		$(".body1 .adver a").eq(n).fadeIn();
		$(".body1 .adver ul li").eq(n).trigger("click");
	});

    //设置小圆点的点击事件，点击小圆点显示对应的图片
	$(".body1 .adver ul li").click(function() {
		index = $(this).text() - 1;
		n = index;
		color = colors[n];
		$(".part1").css({
			"background": "linear-gradient(" + color + ", white, white)"
		});

		$(".part1").css({
			"background": "linear-gradient(" + color + ", white, white)"
		});
		$(".body1 .adver a").eq(n + 1).fadeOut();
		$(".body1 .adver a").eq(n).fadeIn();

        //设置当前元素的class为selected，并移除其他同胞元素的class
		$(this).addClass("selected");
		$(this).siblings().removeClass("selected");
	});
    
    //设置自动轮播，2.5s自动切换下一张图片
	t = setInterval("autoMove()", 2500);

    //鼠标悬停时取消自动轮播 
	$(".body1 .adver").hover(function() {
		clearInterval(t)
	}, function() {
		t = setInterval("autoMove()", 2500);
	});

}

CSS实现方法：

#wrap {
	position:relative;
	width:600px;
	height:400px;
	margin:40px auto;
	overflow:hidden;
	border:2px solid #C06C84;
}

#slider{
	 width:300%;
	 height:100%;
	 text-align: center;
     line-height:400px;
	 font-size:100px;
	 color:#fff;
	 margin-left:0;
	 -webkit-animation:slide1 5s ease-out infinite;
}

#slider li{
	float:left;
	width: 600px;
	height: 100%;
}

#slider li img {
    width: 600px;
	height: 400px;
}

@-webkit-keyframes slide1 {
	0% { margin-left:0; }
	23% { margin-left:0; }
	33% { margin-left:-600px; }
	56% { margin-left:-600px; }
	66% { margin-left:-1200px; }
	90% { margin-left:-1200px; }
	100% { margin-left:0; }
}

@-webkit-keyframes slide2 {
  0% { margin-left:-600px;}
  23% { margin-left:-600px;}
  33% { margin-left:-1200px;}
  56% { margin-left:-1200px;}
  66% { margin-left:0;}
  90% { margin-left:0;}
  100% {margin-left:-600px;}
}

@-webkit-keyframes slide3 {
  0% { margin-left:-1200px;}
  23% { margin-left:-1200px;}
  33% { margin-left:0;}
  56% { margin-left:0;}
  66% { margin-left:-600px;}
  90% { margin-left:-600px;}
  100% {margin-left:-1200px;}
}

#pic1:checked ~ #wrap #slider {
  -webkit-animation-name:slide1;
}

#pic2:checked ~ #wrap #slider {
  -webkit-animation-name:slide2;
}

#pic3:checked ~ #wrap #slider {
  -webkit-animation-name:slide3;
}

#opts {
	 width:600px;
	 height: 40px;
	 margin:auto;
	 color:#fff;
     line-height:40px;
	 text-align: center;
	 font-size: 20px;
}

#opts label{
	float: left;
	width: 100px;
	height: 40px;
	margin-right: 4px;
	background: #C40018;
	cursor: pointer;
}

#opts label:hover {
	background: #FF8F56;
}

#pic1,#pic2,#pic3 {
	display: none;
}

相应HTML代码：

<input type="radio" checked name="slider" id="pic1">
<input type="radio" name="slider" id="pic2">
<input type="radio" name="slider" id="pic3">

<div id="wrap">
	<ul id="slider">
		<li><img src="http://m.qpic.cn/psb?/V10EMU1N4P7Kzd/HTGrAsL9ctWHGDfALQP4i01ZZ5sB.3z2ijL9yXeAAuE!/b/dF4BAAAAAAAA&bo=igKWAQAAAAARFz8!&rf=viewer_4"></li>
		<li><img src="http://m.qpic.cn/psb?/V10EMU1N4P7Kzd/kBkk68JehgyQEcYBtP0UDxAbI6yxdXaOZ*0i3mrj2Fw!/b/dFcBAAAAAAAA&bo=eAJdAQAAAAARFwY!&rf=viewer_4"></li>
		<li><img src="http://m.qpic.cn/psb?/V10EMU1N4P7Kzd/4G6lkYI2K5nczkeEHldv23qz3*BZEPotvVkpZ4gULl8!/b/dPIAAAAAAAAA&bo=igJrAQAAAAARF8I!&rf=viewer_4"></li>
	</ul>
</div>

<div id="opts">
	<label for="pic1">1</label>
	<label for="pic2">2</label>
	<label for="pic3">3</label>
</div>