基于jquery的轮播图（更加图片动态的添加）
1.html:
<div id="lb"> <div class="img_list" id="img_list"> <!--<img src="http://img1.3lian.com/2015/a1/105/d/40.jpg" style="display: block;"/>--> <img src="http://img1.3lian.com/2015/a1/105/d/40.jpg" class="first_img"/> <img src="http://img2.3lian.com/2014/f2/44/d/108.jpg" alt="" /> <img src="http://pic.58pic.com/58pic/15/24/50/43Q58PICkj4_1024.jpg" alt="" /> <img src="http://pic.jj20.com/up/allimg/911/021616153629/160216153629-1.jpg" alt="" /> <img src="http://pic.jj20.com/up/allimg/911/021616153629/160216153629-11.jpg" alt="" /> <img src="http://img2.3lian.com/2014/f4/102/d/91.jpg" alt="" /> <img src="http://pic2015.5442.com/2016/0122/11/1.jpg!960.jpg" alt="" /> </div> <!--<div class="indicator_bg">--> <ul class="indicator_container"> <li class="first_indicator"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!--</div>--> </div>
2.css
*{ margin: 0px; padding: 0px; } #lb{ width: 640px; height: 360px; margin: 50px auto; border: 2px transparent solid; position: relative; overflow: hidden; } #lb img{ display: none; width: 100%; height: 100%; } #lb .img_list .first_img{ display: block ; } /*#lb .indicator_bg{*/ /*position: absolute;*/ /*width:100%;*/ /*top: 340px;*/ /*background-color: #f00;*/ /*}*/ #lb ul{ position : absolute ; bottom: 10px; } *#lb ul li{ display: block; background: #DDDDDD; float: left; width: 12px; height: 12px; margin-left: 8px; list-style:none; border-radius: 50%; } #lb ul .first_indicator{ background-color: #A10000; }
3.js
/** * Created by Administrator on 2017/8/28. */ /*数据源*/ var jsonStr='{"code":"1","data":[{"id":7,"slide_name":"首页主焦点图3","identifier":1,' + '"img":"http:\/\/plebeiannobles.develop-uat.cn\/upFile\/20170728\/f1fe308d10de46b568ba5da89ac0896a.png","url":"http:\/\/www.163.com","slide_des":"首页主焦点图3"},' + '{"id":6,"slide_name":"首页主焦点图2","identifier":1,"img":"http:\/\/plebeiannobles.develop-uat.cn\/upFile\/20170728\/b7c55e5b5318fa695cf571fc905ee159.png",' + '"url":"http:\/\/www.qq.com","slide_des":"首页主焦点图2"}]}'; var bannerInfo=JSON.parse(jsonStr); var bannerList =bannerInfo.data; var htmStr=''; var indicatorStr=''; for(var i=0;i<bannerList.length;i++) { var bannerData = bannerList[i]; htmStr+='<img src="'+bannerData.img+'" alt="" />' indicatorStr+='<li></li>'; } $(function(){ $("#img_list").html(htmStr); $(".img_list img:first").addClass("first_img"); $(".indicator_container").html(indicatorStr); $("#lb ul li:first").addClass("first_indicator"); $("#lb ul").css({ "width":bannerList.length*20+"px", "left":"50%", "margin-left":"-"+bannerList.length*10+"px", }); var i=0; // 轮播定时器 var inTimer = setInterval(inRun,2000); var outTimer; //图片及小圆点切换的方法 function inRun(){ i++; i = (i==7)?0:i; //图片切换 $("#lb img").eq(i).fadeIn(500).siblings('img').fadeOut(500); //小圆点切换 $("#lb ul li").eq(i).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'}); } //鼠标移入小圆点 $("#lb ul li").mouseenter(function(){ //获取对象 var liThis = $(this); //清除轮播动画 clearInterval(inTimer); //开启定时器，防止快速选择小圆点 outTimer = setTimeout(function(){ i = liThis.index(); //通过小圆点切换，停止关闭淡入淡出动画 $("#lb img").eq(i).stop().fadeIn(500).siblings('img').stop().fadeOut(500); //小圆点切换 $("#lb ul li").eq(i).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'}); },200); }); // 鼠标移出小圆点事件 $("#lb ul li").mouseleave(function(){ //清除掉防止图片快速切换 clearTimeout(outTimer); //鼠标移出小圆点时开启图片轮播定时器 inTimer = setInterval(inRun,2000); }); })
html中导入外部文件
<head> <meta charset="UTF-8"> <title>基于jquery的banner轮播图</title> <link rel="stylesheet" href="css/banner.css" type="text/css"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script src="js/banner_js.js" type="text/javascript"></script> </head>
显示效果：