<div style=" width: 1366px; margin: 0px auto; overflow: hidden;"><div class="focus" id="focus001"><ul><li><a href="#" target="_blank"><img src="data:images/slide.png"  height="520"  /></a><div class="slide-text"><p class="slide-text-header">111111111111111111安全管控物联网应用平台</p><p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p></div></li><li><a href="#" target="_blank"><img src="data:images/slide.png"  height="520"  /></a><div class="slide-text"><p class="slide-text-header">222222222222222222安全管控物联网应用平台</p><p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p></div></li><li><a href="#" target="_blank"><img src="data:images/slide.png"  height="520"  /></a><div class="slide-text"><p class="slide-text-header">33333333333333333333安全管控物联网应用平台</p><p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p></div></li><li><a href="#" target="_blank"><img src="data:images/slide.png" height="520"  /></a><div class="slide-text"><p class="slide-text-header">444444444444444444444444444安全管控物联网应用平台</p><p class="slide-text-content">安全管控物联网应用平台根据监狱实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p></div></li></ul></div></div>

  /*slide*/.focus {width:100%; height:520px; overflow:hidden; position:relative; font-family: "\5FAE\8F6F\96C5\9ED1"}.focus ul {height:520px;position:absolute;padding-left: 0px;margin-left: 0px\9}.focus ul li {float:left;  height:520px; overflow:hidden;position:relative;background:#000;}.focus ul li div.slide-text{ position:absolute; color:#fff; top:42%; left:25%; }.focus ul li div.slide-text .slide-text-header{ font-size: 24px; }.focus ul li div.slide-text .slide-text-content{ font-size: 14px; width: 480px;}.focus ul li div {position:absolute; overflow:hidden;}.focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000; display:none;}.focus .btn {position:absolute;/* width:780px;*/height:23px;padding:0px 10px 0px 0px;left:612px;top:90%;/* margin-left: -10%;*/bottom:6px;text-align:left;}.focus .btn span {display:inline-block;_display:inline;_zoom:1;width:18px;height:18px;line-height:18px;text-align:center;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;border-radius: 18px;text-indent:-99999px;}.focus .btn span.on {background:#fff;}.focus .preNext {width:45px; height:100px; position:absolute; top:90px;cursor:pointer;}.focus .pre {left:170px;top:40%; background:url('images/prev.png') no-repeat left center;}.focus .next {right:170px;top:40%; background:url('images/next.png') no-repeat right center;}

$(function() {jQuery.focus = function(slid) {var sWidth = $(slid).width(); //获取焦点图的宽度（显示面积）var len = $(slid).find("ul li").length; //获取焦点图个数var index = 0;var picTimer;/*为图片添加可视宽度*/$(slid).find('ul li a img').css({"width":sWidth});/*添加img  index索引位置*/for(var j= 0,jj=$(slid).find('ul li').length;j<jj;j++){$(slid).find('ul').find('li').eq(j).attr({"img-index":j});}//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮var btn = "<div class='btnBg'></div><div class='btn'>";for(var i=0; i < len; i++) {var ii = i;btn += "<span>"+ii+"</span>";}btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";$(slid).append(btn);$(slid).find("div.btnBg").css("opacity",0.5);//为小按钮添加鼠标滑入事件，以显示相应的内容$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {index = $(slid+" .btn span").index(this);showPics(index);}).eq(0).trigger("mouseenter");//上一页、下一页按钮透明度处理$(slid+" .preNext").css("opacity",0.2).hover(function() {$(this).stop(true,false).animate({"opacity":"0.5"},300);},function() {$(this).stop(true,false).animate({"opacity":"0.2"},300);});//上一页按钮$(slid+" .pre").click(function() {index -= 1;if(index == -1) {index = len-1;}showPics(index);});//下一页按钮$(slid+" .next").click(function() {index += 1;if(index == len) {index = 0;}showPics(index);});//左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度$(slid+" ul").css("width",sWidth * (len));//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放$(slid).hover(function() {clearInterval(picTimer);},function() {picTimer = setInterval(function() {showPics(index,'next');index++;if(index == len) {index = 0;}},2000); //此4000代表自动播放的间隔，单位：毫秒}).trigger("mouseleave");//显示图片函数，根据接收的index值显示相应的内容function showPics(index) {addState(index);/*向左滚动一个图片宽度*/var nowLeft = - sWidth;if(index !== 0){scrollLeft(nowLeft);}else{/*索引为0时候 第一个元素如果是最后的索引值 就添加到队尾*/var first_li =$(slid).find("ul li").first();/*最后一个元素单独执行 添加到队尾*/if(first_li.attr('img-index') == len-1){scrollLeft(nowLeft);}if(index == 0){scrollLeft(nowLeft);}}}/*执行animate滚动效果*/function scrollLeft(nowLeft){$(slid+" ul").animate({"left":nowLeft},"normal",function(){/*var li_first =    $(slid).find("ul li").first();$(slid).find("ul").append(li_first);*/$(this).css({"left":"0px"});});}function addState(index){var lis =$(slid).find("ul li").length;var first_li =$(slid).find('ul li').first();for(var j= 0,jj=lis;j<jj;j++){var attr =$(slid).find("ul li").eq(j).attr('img-index');if( attr == index){$(slid).find("ul li").eq(j).addClass("on").siblings().removeClass("on");/*当前的li总是在第一个*/$(slid).find("ul").prepend($(slid).find("ul li").eq(j));$(slid+" .btn span").removeClass("on").eq(attr).addClass("on");$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},500).eq(attr).stop(true,false).animate({"opacity":"1"},500);}}}};});

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/1.js"></script>