初试--轮播图--图片切换

尝试使用图片切换做轮播图

<style>*{margin: 0;padding: 0;list-style: none;}.box{width: 500px;height: 300px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}img{width: 500px;height: 300px;}.btn,.points{position: absolute;cursor: pointer;}.btn{width: 20px;height: 40px;background: green;color: white;font-size: 20px;text-align: center;line-height: 40px;top: 50%;margin-top: -20px;z-index: 999;}.btn_l{left: 0;}.btn_r{right: 0;}.points{width: 100px;height: 20px;border-radius: 20px;background: skyblue;left: 50%;margin-left: -50px;bottom: 30px;}.points li{width: 15px;height: 15px;border-radius: 50%;background-color: red;float: left;margin: 2.5px 5px;}.points li.blue{background: blue;}
</style>

body

<h1>利用图片完成轮播效果</h1>
<div class="box"><img src="img/0.jpg" alt=""><!-- <img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""> --><div class="btn btn_l"> &lt; </div><div class="btn btn_r"> &gt; </div><ul class="points"><li class="blue"></li><li></li><li></li><li></li></ul>
</div>

script
// 1.点击4个点切换成对应的图片
// 2.点击左右按钮图片切换
// 3.切换图片时改变图片的src
// 4.左右按钮和下面四个点需要控制同一个变量

// 1.获取元素
var oImg=document.getElementsByTagName("img")[0];
var oBtn_l=document.getElementsByClassName("btn_l")[0];
var oBtn_r=document.getElementsByClassName("btn_r")[0];
var aLi=document.getElementsByTagName("li");
// 2.声明全局变量
var index=0;function point(){for(var i=0;i<aLi.length;i++){aLi[i].className="";}aLi[index].className="blue";
}
// 3.点击左按钮   index--   0临界点
oBtn_l.onclick=function(){// if(index==0){//     index=3;// }else{//     index--;// }index==0?index=3:index--;oImg.src="img/"+index+".jpg";point();
}// 4.点击右按钮   index++   3临界点
oBtn_r.onclick=function(){index==3?index=0:index++;oImg.src="img/"+index+".jpg";point();
}// 5.下面4个点
for(var i=0;i<aLi.length;i++){aLi[i].a=i;//给li添加 自定义的属性    储存 i aLi[i].onclick=function(){index=this.a;oImg.src="img/"+index+".jpg";point(); }
}

初试--轮播图--图片切换相关推荐

JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
关于element-ui中轮播图手动切换轮播图片
文章目录前言一.关于element-ui中轮播图手动切换轮播图片二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法结尾前言在开发过程中发现项目中轮 ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
JavaScript实现的，轮播图左右切换网页动画源码
大家好,今天给大家介绍一款,JavaScript实现的,轮播图左右切换网页动画源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以点击图片切换(图2) 图2 可以点击左右按钮切换(图3) 图3 ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正  <text>pages/swiper/swiper.wxml< ...
【Web前端】【疑难杂症】轮播图图片自适应显示问题（bootstrap3轮播图）
关键代码 html <div id="header" class="carousel slide"><! ...
轮播图图片大小不统一
如何让图片按比例响应式缩放.并自动裁剪的css技巧实现样式 html部分: <div class="zoomImage" style="background-im ...

初试--轮播图--图片切换

初试--轮播图--图片切换相关推荐

最新文章

热门文章