jquery学习之自动轮播
jquery学习之自动轮播
效果图 请看本站首页轮播图,本人较懒没有写图片轮播的动画效果,需要更多动画效果的可以自己写! 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>博客轮播</title> </head> <style> #ad{ width:100%; display: flex; height: 260px; z-index: 1; box-shadow: #ddd 1px 1px 5px; } .lb{ display: none; width: 100%; height: 260px; } .li{ width: 15px; height: 15px; line-height: 15px; list-style: none; text-align: center; color:rgb(8, 152, 212); border: paleturquoise 1px solid; border-radius: 50%; padding: 3px; z-index: 2; margin-right: 5px; } .id{ background: paleturquoise; } .ceng{ display: flex; float: right; margin-top: -40px; margin-right: 20px; } </style> <body> <div id="ad"> <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunbo.jpg"/> <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboii.jpg"/> <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboiiii.jpg"/> </div> <div class="ad"> <ol class="ceng"> <li class="li">1</li> <li class="li">2</li> <li class="li">3</li> </ol> </div> </body> <script src="../jquery.min.js"></script>//这里引入jquery文件,自己去官网下载引入! <script> $('#ad .lb').eq(0).show();//显示第一张图 $('.ad .li').eq(0).addClass('id');//显示第一个指示点 for(var i=0;i<$('.ad li').length;i++){ $('.ad .li').eq(i).attr('abc',i); } var runs = setInterval(run,3000);//设置轮播时长 var num = 0;//初始化 function run(){ $('#ad .lb').eq(num).hide(); //隐藏上一张图片 $('.ad .li').removeClass('id'); //删除一个指示点样式 num++; $('.ad .li').eq(num).addClass('id');//添加一个指示点样式 $('#ad .lb').eq(num).slideDown(1000);//显示下一张图片 if(num>=$('.ad .li').length-1){ num=-1; } } $('.ad .li').mouseover(function(){ $('.ad li').removeClass('id'); //添加一个指示点样式 $(this).addClass('id'); //删除一个指示点样式 $('#ad .lb').hide(); $('#ad .lb').eq($(this).attr('abc')).show(); clearInterval(runs); //停止轮播 }) $('.ad .li').mouseout(function(){ runs = setInterval(run,3000); //重新设置轮播时长 num = $(this).attr('abc'); //获取列表的排序 }) </script> </html>
 4周前
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号
sitemap