DDR爱好者之家 Design By 杰米
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下
需求:
自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图
效果图:
![轮播图]
思路:
将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片。
轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。
后面功能实现顺序依旧是写法一里的思路。
戳!写法一地址
HTML部分:
<div id="banner"> <div class="w"> <!-- 左右箭头--> <span class="iconfont icon-zuojiantou"></span> <span class="iconfont icon-youjiantou"></span> <!-- 轮播图--> <ul > <li><img src="/UploadFiles/2021-04-02/1.jpg">CSS部分:
<style> *{ margin: 0; padding: 0; list-style: none; } .w { width: 1000px; height: 600px; margin: 100px auto 0; position: relative; overflow: hidden; } ul { width: 1000%; transition: all .5s ease-in-out; } ul li { float: left; width: 1000px; } ul li img { width: 100%; height: 600px; } .iconfont { color: white; position: absolute; font-size: 30px; top: calc(50% - 15px); background-color: rgba(216, 216, 216, 0.23); border-top-right-radius: 50%; border-bottom-right-radius: 50%; cursor: pointer; } .iconfont:hover { color: palegreen; } .icon-zuojiantou { left: 0; } .icon-youjiantou { right: 0; } #circleContainer { position: absolute; bottom: 10px; left: calc(50% - 30px); } #circleContainer li { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: white; margin-right: 5px; } #circleContainer .change { background-color: palegreen; } </style>JS部分:
<script> let timer = setInterval(function () { arrow_r.onclick(); },2000); let w = document.querySelector(".w"); w.addEventListener("mouseenter",function () { clearInterval(timer); }); w.addEventListener("mouseleave",function () { clearInterval(timer); timer = setInterval(function () { arrow_r.onclick(); },2000); }); //获取元素 let ul = document.querySelector("ul"); let ol = document.querySelector("#circleContainer"); let arrow_r = document.querySelector(".icon-youjiantou"); let arrow_l = document.querySelector(".icon-zuojiantou"); let ImgWidth = ul.children[0].offsetWidth; let location_i = 0 ; // 创建小圆点 动态生成小圆点,图片增加时小圆点也随之增加 for (let i = 0; i<ul.children.length;i++){ let li = document.createElement("li"); li.setAttribute("index",i); li.addEventListener("click",function () { let index = this.getAttribute("index"); move(ul,index); location_i = index ; }); ol.appendChild(li); } let liclone = ul.children[0].cloneNode(true); ul.appendChild(liclone); // 轮播函数 function move(targetObj,n) { if (n === targetObj.children.length ) { targetObj.style.marginLeft = "0px"; n = 0; } targetObj.style.marginLeft = -n * ImgWidth +"px"; for (let i =0 ;i<ol.children.length;i++){ ol.children[i].className = ""; } n === 3 "change": ol.children[n].className = "change"; } ol.children[0].className = "change"; // 右箭头点击 arrow_r.onclick = function () { if (location_i === 3) { location_i = 0 ; ul.style.marginLeft = "0px" ; } location_i++; move(ul,location_i); }; // 左箭头点击 arrow_l.addEventListener("click",function () { if (location_i == 0) { location_i = ul.children.length -1 ; } location_i--; move(ul,location_i); }) </script>精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]