html实现轮播图效果
通过js实现简易轮播图的效果
html代码部分
<body>
<div class="slider">
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
</ul>
</div>
</body>
CSS部分
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.slider ul{
position: relative;
display: flex;
/* width: 300%; */
}
.slider{
overflow: hidden;
}
.slider ul li img{
width: 100%;
}
.slider .lf_btn{
width: 50px;
position: absolute;
top:180px;
left:3%
}
.slider .rt_btn{
width: 50px;
position: absolute;
top:180px;
right:3%
}
.slider .header{
position: absolute;
top:450px;
}
.slider .header span{
width: 10px;
height: 10px;
line-height: 10px;
text-align: center;
background:rgba(255, 0, 0, 0.4);
margin: 4px;
padding: 5px;
/* ⿏标变⼩⼿ */
cursor: pointer;
color: #fff;
}
.slider .header .content{
background-color: orange;
}
javascrpt部分
/
/轮播图的容器
var slider_box = document.querySelector(".slider");
//轮播图具体内容
var slider = document.querySelector(".slider>ul");
//获取轮播图集
var slider_list = document.querySelectorAll(".slider>ul>li"); var slider_width =(slider_list.length -1)*100;
slider.style.width = slider_width +100+"%";
console.log(slider_width);
slider.style.left =0;
offset =0;
//定义图⽚函数
var change=function(offset){
var newOffset =parseInt(slider.style.left)+ offset;
if(newOffset <-slider_width)
slider.style.left =0;
else if(newOffset >0){
slider.style.left = slider_width *-1+"%";
}
else{
slider.style.left = newOffset +"%";
}
}
/
/创建按钮
var lf = ateElement("img");
var rt = ateElement("img");
lf.src="../images/jiantou-zuo.png";
rt.src="../images/jiantou-you.png";
lf.className="lf_btn";
rt.className="rt_btn";
slider_box.appendChild(lf);
slider_box.appendChild(rt);
//访问两个按钮
var lf_btn = document.querySelector(".lf_btn");
html span 居中var rt_btn = document.querySelector(".rt_btn");
//⾃动播放
var timer =setInterval(lick,3000);
var start=function(){
//按钮隐藏
lf.style.display ="none";
rt.style.display ="none";
timer =setInterval(lick,3000)
}
var stop=function(){
//按钮显⽰
lf.style.display ="block";
rt.style.display ="block";
clearInterval(timer);
}
//控制⾃动播放
//⿏标放到轮播区停⽌⾃动播放
useover = stop;
//⿏标离开轮播区开始⾃动播放
useout = start;
//创建点按钮
var head = ateElement("div");
head.className="header";
slider_box.appendChild(head);
var head_box = document.querySelector(".slider .header")
for(var i =1; i <= slider_list.length;i++){
var point = ateElement("span");
if(i==1)
point.className="content";
point.innerHTML=i;
head_box.appendChild(point);
}
var index =0;
/
/⾼亮显⽰函数
var header_list = document.querySelectorAll(".slider .header span");//获取轮播图集var head_width = header_list.length *14;
console.log(head_width);
//动态居中显⽰
head_box.style.left="calc(50% - "+head_width+"px)";
var high=function(){
for(var i =0; i < slider_list.length;i++){
header_list[i].className="";
}
header_list[index].className="content"; }
//左右按钮点击事件
lick=function(){
index--;
if(index <0)
index = header_list.length -1;
high(index);
change(-100);
}
lick=function(){
index++;
if(index >header_list.length -1)
index =0;
high(index);
change(100);
}
//数字按钮点击事件
for(var i =0; i < slider_list.length;i++){
header_list[i].onclick=function(){
//获取当前点击的index值
var current_index =this.innerHTML -1;
change((index - current_index)*100);        index = current_index;
high(index);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。