想练习更多前端案例,请进个人主页,点击前端实战案例->传送门
觉得不错的记得点个赞?支持一下我0.0!谢谢了!
不积跬步无以至千里,不积小流无以成江海。
该轮播图可以自适应设备的宽度变化,(由于图片大小有限制,故没演示其他效果:无缝轮播、小圆点控制轮播、鼠标放在图片上停止轮播,移出则开始轮播等)效果如下:
代码如下:
- index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>分销系统|公众号开发|商城系统|小程序分销商城开发 德云网络科技</title> <script src="./js/index.js"></script> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div id="header"> <div class="top-menu"> <ul> <li><img src="./images/logo.png" style="padding-right: 92px;"></li> <li>首页</li> <li>分销系统</li> <li>消费全返</li> <li>系统O2O</li> <li>系统渠道商</li> <li>价格与服务</li> <li>售后服务</li> <li>关于我们</li> <li class="btn"> <input type="button" value="登录"><input type="button" value="免费试用"> </li> </ul> </div> </div> <div id="banner"> <div class="slide"> <a href="#"><img src="./images/banner1.jpg"></a> <a href="#"><img src="./images/banner2.jpg"></a> <a href="#"><img src="./images/banner3.jpg"></a> <a href="#"><img src="./images/banner1.jpg"></a> </div> <ul class="slick-dots"> <li><label></label></li> <li><label></label></li> <li><label></label></li> </ul> </div> <div id="content"> </div> <div id="footer"> </div> </body> </html>
- index.js
// 轮播图js代码 window.onload = function () { var slide = document.getElementsByClassName('slide')[0]; var imgs = document.getElementsByClassName('slide')[0].getElementsByTagName('img'); var slick_dots = document.getElementsByClassName('slick-dots')[0].getElementsByTagName('label'); // 切换图片的速度 var margin_left = 0; //定义定时器timer var timer; //屏幕的宽度,根据屏幕的宽度自适应图片的宽度,(即自适应轮播图) var winWidth = document.documentElement.scrollWidth || document.body.scrollWidth; run(); // 绑定轮播图图片鼠标移入移出事件 for(let i=0;i<imgs.length;i++){ imgs[i].onmousemove = function () { clearTimeout(timer); margin_left = -i*100; slide.style.marginLeft = margin_left + "%"; }; imgs[i].onmouseleave = function () { run(); } } // 绑定轮播图小圆点鼠标移入移出事件 for(let i=0;i<slick_dots.length;i++){ slick_dots[i].onmousemove = function () { clearTimeout(timer); margin_left = -i*100; slide.style.marginLeft = margin_left + "%"; changeDots(i); }; slick_dots[i].onmouseleave = function () { run(); } } // 运行轮播图滚动 function run() { var n = (-margin_left%100 === 0)?1500:10; timer = setTimeout(run,n); if(margin_left === -300){ margin_left = 0; slide.style.marginLeft = 0; } var index = Math.floor(-margin_left/100); if(index<3){ changeDots(index); } slide.style.marginLeft = margin_left + "%"; margin_left -= 1; } // 小圆点的背景色随轮播图滚动而滚动 function changeDots(m) { // 改代码用于初始化所有原点长度 for(let i=0;i<slick_dots.length;i++){ slick_dots[i].style.width = "10px"; } slick_dots[m].style.width = "35px"; } };
- index.css
/*header:导航栏开始*/ #header{ width: 100%; height: 88px; display: flex; justify-content: center; } .top-menu{ width: 1200px; height: 88px; } .top-menu ul{ display: flex; justify-content: space-around; align-items: center; margin-top: 19px; font-size: 14px; color: #333; } .top-menu .btn input{ outline: none; height: 30px; border: 1px solid #4381ff; border-radius: 4px; cursor: pointer; } .top-menu .btn input:nth-child(1){ width: 62px; color: #4381ff; background-color: #FFFFFF; margin-left: 25px; margin-right: 10px; cursor: pointer; } .top-menu .btn input:nth-child(2){ width: 80px; color: #FFFFFF; background-color: #4381ff; } /*header:导航栏结束*/ /*banner:轮播图开始*/ #banner{ height: 490px; width: 100%; position: relative; overflow: hidden; } #banner .slide{ height: 100%; width: 400%; } #banner .slide a{ display: inline-block; height: 100%; width: 25%; float: left; } #banner .slide img{ height: 100%; width: 100%; } .slick-dots{ position: absolute; width: 75px; display: flex; justify-content: space-around; align-items: center; left: 50%; bottom: 21px; transform: translateX(-50%); } .slick-dots li label{ width: 10px; height: 10px; display: inline-block; background-color: #DAE6FF; border-radius: 5px; } /*banner:轮播图结束*/
- base.css
/*可以共用的样式*/ *{ margin: 0; padding: 0; list-style: none; text-decoration: none; }