先来看一下效果：http://39.105.101.122/myhtml/Jquery/img_switch/img_switch.html（甄嬛的眼睛有木有变大）
添加一个div（class=container），设置宽度和高度，这里设置了宽800px，高450px。添加居中的定位。在div里面添加一个ul(class="img")列表用来盛放图片，设置ul里面的li标签position为absolute，这时图片会重合在一起，同时设置display为none。图片设置宽度和高度与container相同。在container里面再添加一个ul列表用来盛放下面的一排数字，然后进行相应的定位和设置。添加两个div：left和right，分别是左右两个按钮，进行相应的定位和设置，里面的箭头分别是大于号和小于号。
实现原理：
当鼠标移动到对应的数字上面的时候，用$(this).index()获得数字所在容器里面的序号，然后将序号传递到eq()函数里面获得 li 标签，然后添加函数fadeIn();这样隐藏的图片就显示出来了，同时调用sibling().fadeOut()，让同级的兄弟节点隐藏起来，这样之前显示的图片就隐藏了起来。
添加setInterval()函数，让图片每隔相同的时间变换一次。
我觉得一个主要的问题就是自动切换和手动切换的冲突，当鼠标移动到图片上面的时候应该停止自动切换，在这里用的方法是：
给container添加hover函数，当鼠标移动到container里面的时候用clearInterval()函数去掉时间间隔函数，这样当鼠标移动到图片上面的时候，图片就不会切换了，当鼠标移出的时候添加setInterval()函数。这样图片就能继续切换了。
注意：i 和 t 需要设置成全局变量，这样不同的函数才能共用。i 表示当前显示图片的索引。t 是setInterval的ID。当鼠标移出的时候不用再var一个t了，只需：t=setInterval(time_fun,1500);即可。
eq(n):找到第n个元素
eg：$('li').eq(2).css('background-color', 'red');//设置第二个li标签的背景颜色为红色
index():找到该元素的索引值
有兴趣的研究一下代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery_img_switch</title> 6 </head> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 800px; 14 height: 450px; 15 margin: 100px auto; 16 position: relative; 17 } 18 .container .img{ 19 list-style: none; 20 /*position: absolute;*/ 21 } 22 .container .img li{ 23 position: absolute; 24 display: none; 25 26 } 27 .container .img img{ 28 width: 800px; 29 height: 450px; 30 } 31 .container .num{ 32 position: absolute; 33 list-style: none; 34 font-size: 0; 35 bottom: 20px; 36 width: 100%; 37 text-align: center; 38 } 39 .container .num li{ 40 width: 30px; 41 height: 30px; 42 background: rgba(255,255,255,0.5); 43 border-radius: 50%; 44 color: #000; 45 display: inline-block; 46 line-height: 30px; 47 text-align: center; 48 font-size: 20px; 49 margin-right: 10px; 50 cursor: pointer; 51 } 52 .left, .right{ 53 width: 50px; 54 height: 60px; 55 text-align: center; 56 line-height: 60px; 57 background-color: rgba(0,0,0,0.5); 58 color: #fff; 59 position: absolute; 60 top: 50%; 61 margin-top: -30px; 62 font-size: 40px; 63 cursor: pointer; 64 } 65 .left{ 66 left: 20px; 67 } 68 .right{ 69 right: 20px; 70 } 71 .container .num .active{ 72 background: rgba(255,0,0,1); 73 color: #fff; 74 } 75 </style> 76 <script type="text/javascript" src="../jquery-2.2.1.min.js"></script> 77 <script type="text/javascript"> 78 var i=0; 79 var t; 80 $(document).ready(function(){ 81 $(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 82 83 $(".container .num li").on("mouseover",active); 84 85 t=setInterval(time_fun,1500); 86 87 $(".container").hover(in_fun,out_fun); 88 89 $(".container .left").on("click",left_fun); 90 $(".container .right").on("click",right_fun); 91 }); 92 93 function time_fun(){ 94 i++; 95 if(i==10){ 96 i=0; 97 } 98 $(".container .num li").eq(i).addClass("active").siblings().removeClass("active"); 99 $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300); 100 } 101 102 function in_fun(){ 103 104 clearInterval(t); 105 } 106 function out_fun(){ 107 t=setInterval(time_fun,1500); 108 } 109 function active(){ 111 $(this).addClass("active").siblings().removeClass("active"); 112 $(".container .img li").eq($(this).index()).fadeIn(300).siblings().fadeOut(300); 113 i=$(this).index(); 114 } 115 function left_fun(){ 116 i--; 117 if(i==-1){ 118 i=9; 119 } 120 $(".container .num li").eq(i).addClass("active").siblings().removeClass("active"); 121 $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300); 122 } 123 function right_fun(){ 124 i++; 125 if(i==10){ 126 i=0; 127 } 128 $(".container .num li").eq(i).addClass("active").siblings().removeClass("active"); 129 $(".container .img li").eq(i).fadeIn(300).siblings().fadeOut(300); 130 } 131 </script> 132 <body> 133 <div class="container"> 134 <ul class="img"> 135 <li ><img src="../../Img/1.jpg"></li> 136 <li><img src="../../Img/2.jpg"></li> 137 <li><img src="../../Img/3.jpg"></li> 138 <li><img src="../../Img/4.jpg"></li> 139 <li><img src="../../Img/5.jpg"></li> 140 <li><img src="../../Img/6.jpg"></li> 141 <li><img src="../../Img/7.jpg"></li> 142 <li><img src="../../Img/8.jpg"></li> 143 <li><img src="../../Img/9.jpg"></li> 144 <li><img src="../../Img/10.jpg"></li> 145 </ul> 146 <ul class="num"> 147 <li class="active">1</li> 148 <li>2</li> 149 <li>3</li> 150 <li>4</li> 151 <li>5</li> 152 <li>6</li> 153 <li>7</li> 154 <li>8</li> 155 <li>9</li> 156 <li>10</li> 157 </ul> 158 <div class="left"><</div> 159 <div class="right">></div> 160 </div> 161 </body> 162 </html>