JS轮播图,写法二


JS轮播图,写法二

需求:
自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图
效果图:
![轮播图JS轮播图,写法二

思路:

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="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
</ul>
<!-- /小圆点-->
<ol id="circleContainer">

</ol>
</div>
</div>

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 ? ol.children[0].className = "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>

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

JS轮播图,写法二

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » JS轮播图,写法二
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏