jQuery+css3带预览图幻灯片图片轮播代码

jQuery+css3带预览图幻灯片图片轮播代码，鼠标悬停索引按钮时显示缩略图，除此之外每张图片都可以设置不同的文字标题及简介。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script type="text/javascript">
			var index=0,timer;
			
			$(".ctrl-i").click(function () {
				clearInterval(timer);
				index=$(this).index();
				slide (index);
				timerF();
			})
			
			$(document).ready(function () {
				timerF();
			})
			
			function timerF () {
				timer=setInterval(function(){
					index++;
					if (index>=5) {
						index=0;
					}
					slide(index);
				},3000)
			}
			
			function slide (index) {
				$(".ctrl .ctrl-i").eq(index).addClass("ctrl-i-active").siblings().removeClass("ctrl-i-active");
				$(".main .main-i").eq(index).addClass("main-i-active");
				setTimeout(function(){
					$(".main .main-i").eq(index).siblings().removeClass("main-i-active");
				},500)
			}
			
			//鼠标移到图片上禁止滚动，鼠标移开开始滚动
			$(".main-i").hover(function () {
				clearInterval(timer);
			},function () {
				timerF();
			})
</script>