用jquery制作的简单轮播图
程序员文章站
2023-10-26 19:43:04
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录。 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相应位置 首先书写的div部分 然后书写style样式部分 最后是script部分 然后出现上图样式, ......
我也是进入h5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录。
今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相应位置
首先书写的div部分
1 <div id="scrollpics"> 2 <ul class="slider"> 3 <li><img src="../images/1.jpg" alt=""></li> 4 <li><img src="../images/2.jpg" alt=""></li> 5 <li><img src="../images/3.jpg" alt=""></li> 6 <li><img src="../images/7.jpg" alt=""></li> 7 <li><img src="../images/5.jpg" alt=""></li> 8 </ul> 9 <ul class="num"></ul> 10 </div>
然后书写style样式部分
1 <style> 2 *{ 3 margin: 0px; 4 padding: 0px; 5 } 6 ul{ 7 list-style: none; 8 } 9 #scrollpics{ 10 height: 420px; 11 width: 790px; 12 margin-bottom: 10px; 13 overflow: hidden; 14 position: relative; 15 top: 100px; 16 left:400px; 17 } 18 .slider{ 19 margin-top: 0px; 20 } 21 .slider img{ 22 width: 100%; 23 } 24 .num{ 25 position: absolute; 26 right: 5px; 27 bottom: 5px; 28 } 29 .num li{ 30 float: left; 31 color: #ff7300; 32 text-align: center; 33 line-height: 16px; 34 width: 16px; 35 height: 16px; 36 cursor: pointer; 37 overflow: hidden; 38 margin: 3px 1px; 39 border: 1px solid #ff7300; 40 background-color: white; 41 border-radius: 50%; 42 } 43 .num li.active{ 44 color: #fff; 45 line-height: 21px; 46 width: 21px; 47 height: 21px; 48 font-size: 16px; 49 margin: 0 1px; 50 border: 0; 51 background-color: #ff7300; 52 font-weight: bold; 53 border-radius: 50%; 54 cursor: pointer; 55 } 56 </style>
最后是script部分
1 <script> 2 $(function () { 3 var slider =$("#scrollpics .slider"); 4 //获取图片 5 var imgcon =$("#scrollpics .slider li"); 6 //除第一张其余的图片全部隐藏 7 imgcon.not(imgcon.eq(0)).hide(); 8 //定义页码 9 var num =$("#scrollpics .num") 10 //获取li标签的长度 11 //find()方法返回备选元素的后代元素 12 var len =slider.find("li").length; 13 var html_page =""; 14 index=0; 15 //添加页码 16 for (var i=0;i<len;i++){ 17 if (i===0){ 18 html_page+="<li class='active'>"+(i+1)+"</li>" 19 } 20 else { 21 html_page +="<li>"+(i+1)+"</li>" 22 } 23 } 24 //输出原点 25 num.html(html_page) 26 //显示索引对应的图片 27 function showpic(index) { 28 imgcon.eq(index).show().siblings("li").hide(); 29 num.find("li").eq(index).addclass("active").siblings("li").removeclass("active") 30 } 31 //原点点击事件 32 $(".num li").click(function () { 33 index=$(this).index() 34 showpic(index) 35 }) 36 //图片轮播 37 $("#scrollpics").hover(function () { 38 clearinterval(window.timer) 39 },function () { 40 window.timer =setinterval(function () { 41 showpic(index); 42 index++; 43 if (index ===len){ 44 index =0 45 } 46 },2000) 47 }).trigger("mouseleave")//触发备选元素的指定事件 48 49 }) 50 51 </script>
然后出现上图样式,最后因为是用jquery书写的代码,还要导入 <script src="../js/jquery-2.2.3.js"></script>
最后是完整代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jq轮播图</title> 6 <script src="../js/jquery-2.2.3.js"></script> 7 <style> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 ul{ 13 list-style: none; 14 } 15 #scrollpics{ 16 height: 420px; 17 width: 790px; 18 margin-bottom: 10px; 19 overflow: hidden; 20 position: relative; 21 top: 100px; 22 left:400px; 23 } 24 .slider{ 25 margin-top: 0px; 26 } 27 .slider img{ 28 width: 100%; 29 } 30 .num{ 31 position: absolute; 32 right: 5px; 33 bottom: 5px; 34 } 35 .num li{ 36 float: left; 37 color: #ff7300; 38 text-align: center; 39 line-height: 16px; 40 width: 16px; 41 height: 16px; 42 cursor: pointer; 43 overflow: hidden; 44 margin: 3px 1px; 45 border: 1px solid #ff7300; 46 background-color: white; 47 border-radius: 50%; 48 } 49 .num li.active{ 50 color: #fff; 51 line-height: 21px; 52 width: 21px; 53 height: 21px; 54 font-size: 16px; 55 margin: 0 1px; 56 border: 0; 57 background-color: #ff7300; 58 font-weight: bold; 59 border-radius: 50%; 60 cursor: pointer; 61 } 62 </style> 63 </head> 64 <body> 65 66 <div id="scrollpics"> 67 <ul class="slider"> 68 <li><img src="../images/1.jpg" alt=""></li> 69 <li><img src="../images/2.jpg" alt=""></li> 70 <li><img src="../images/3.jpg" alt=""></li> 71 <li><img src="../images/7.jpg" alt=""></li> 72 <li><img src="../images/5.jpg" alt=""></li> 73 </ul> 74 <ul class="num"></ul> 75 </div> 76 <script> 77 $(function () { 78 var slider =$("#scrollpics .slider"); 79 //获取图片 80 var imgcon =$("#scrollpics .slider li"); 81 //除第一张其余的图片全部隐藏 82 imgcon.not(imgcon.eq(0)).hide(); 83 //定义页码 84 var num =$("#scrollpics .num") 85 //获取li标签的长度 86 //find()方法返回备选元素的后代元素 87 var len =slider.find("li").length; 88 var html_page =""; 89 index=0; 90 //添加页码 91 for (var i=0;i<len;i++){ 92 if (i===0){ 93 html_page+="<li class='active'>"+(i+1)+"</li>" 94 } 95 else { 96 html_page +="<li>"+(i+1)+"</li>" 97 } 98 } 99 //输出原点 100 num.html(html_page) 101 //显示索引对应的图片 102 function showpic(index) { 103 imgcon.eq(index).show().siblings("li").hide(); 104 num.find("li").eq(index).addclass("active").siblings("li").removeclass("active") 105 } 106 //原点点击事件 107 $(".num li").click(function () { 108 index=$(this).index() 109 showpic(index) 110 }) 111 //图片轮播 112 $("#scrollpics").hover(function () { 113 clearinterval(window.timer) 114 },function () { 115 window.timer =setinterval(function () { 116 showpic(index); 117 index++; 118 if (index ===len){ 119 index =0 120 } 121 },2000) 122 }).trigger("mouseleave")//触发备选元素的指定事件 123 124 }) 125 126 </script> 127 </body> 128 </html>