没有插入图片，效果如下：
注意：下面代码为PC端显示样式，如果要放在手机端，需要微调下style
#wrapper、#banner、.bg width 自行修改，我的手机端iphone5s 为width: 300px; 与之对应的changeTo(num)方法里也应该修改为300,，var goLeft = num * 300;
每张图片也对应为width="300px"
<li><a href="#"><img src="./img/test3.jpg" width="300px"
height="200px" alt="胃黏膜损伤">
</a>
</li>
课程推荐：
企业必用的sql语句优化，手把手学习oracle数据库，一周轻松掌握并精通。
/topic/details?topicId=2000000204413360
<!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>图片轮播 jq(左右切换)</title><styletype="text/css">body,div,ul,li,a,img{margin: 0;padding: 0;}ul,li{list-style: none;}a{text-decoration: none;}#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}.imgList li{float:left;display: inline;}#prev,#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}#prev{left: 10px;}#next{right: 10px;}#prev:hover,#next:hover{opacity: 0.5;filter:alpha(opacity=50);}.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}.infoList li{display: none;}.infoList .infoOn{display: inline;color: white;}.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}.indexList .indexOn{background: red;font-weight: bold;color: white;}</style></head><body><divid="wrapper"><!-- 最外层部分 --><divid="banner"><!-- 轮播部分 --><ulclass="imgList"><!-- 图片部分 --><li><ahref="#"><imgsrc="./img/test1.jpg"width="400px"height="200px"alt="puss in boots1"></a></li><li><ahref="#"><imgsrc="./img/test2.jpg"width="400px"height="200px"alt="puss in boots2"></a></li><li><ahref="#"><imgsrc="./img/test3.jpg"width="400px"height="200px"alt="puss in boots3"></a></li><li><ahref="#"><imgsrc="./img/test4.jpg"width="400px"height="200px"alt="puss in boots4"></a></li><li><ahref="#"><imgsrc="./img/test5.jpg"width="400px"height="200px"alt="puss in boots5"></a></li></ul><imgsrc="./img/prev.png"width="20px"height="40px"id="prev"><imgsrc="./img/next.png"width="20px"height="40px"id="next"><divclass="bg"></div><!-- 图片底部背景层部分--><ulclass="infoList"><!-- 图片左下角文字信息部分 --><liclass="infoOn">puss in boots1</li><li>puss in boots2</li><li>puss in boots3</li><li>puss in boots4</li><li>puss in boots5</li></ul><ulclass="indexList"><!-- 图片右下角序号部分 --><liclass="indexOn">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></div><scripttype="text/javascript"src="./js/jquery.min.js"></script><scripttype="text/javascript">var curIndex = 0, //当前indeximgLen = $(".imgList li").length; //图片总数// 定时器自动变换2.5秒每次var autoChange = setInterval(function(){if(curIndex <imgLen-1){curIndex ++;}else{curIndex=0;}//调用变换处理函数changeTo(curIndex);},2500);//左箭头滑入滑出事件处理$("#prev").hover(function(){//滑入清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//左箭头点击处理$("#prev").click(function(){//根据curIndex进行上一个图片处理curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);changeTo(curIndex);});//右箭头滑入滑出事件处理$("#next").hover(function(){//滑入清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//右箭头点击处理$("#next").click(function(){curIndex = (curIndex <imgLen- 1) ? (++curIndex) : 0;changeTo(curIndex);});//对右下角按钮index进行事件绑定处理等$(".indexList").find("li").each(function(item){$(this).hover(function(){clearInterval(autoChange);changeTo(item);curIndex=item;},function(){autoChangeAgain();});});//清除定时器时候的重置定时器--封装function autoChangeAgain(){autoChange=setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex=0;}//调用变换处理函数changeTo(curIndex);},2500);}function changeTo(num){vargoLeft=num* 400;$(".imgList").animate({left: "-" + goLeft + "px"},500);$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");}</script></body></html>
