前言
用JS实现轮播图效果
现在我们在很多网站上都能看到轮播图,像某东、某宝、某猫等等大小型网站上都有应用,方法呢也有很多种。
实现的功能:
(1)点击下方小圆点可以实现图片切换
(2)点击左右的按键可以实现图片切换
(3)自动轮播图片
(4)鼠标放上去停止自动播放,鼠标离开自动播放
提示:以下是本篇文章正文内容,下面案例可供参考
一、轮播图基本HTML布局
创建一个大盒子里面存放轮播图的图片,左右箭头,小圆点按钮。总共展示五张图片,图片中间下方5 个点的代表展示顺序。图片左右两边的箭头上一张和下一张。
<div id="box">
<div id="left"> <!--左箭头-->
<span><</span>
</div>
<div id="right"> <!--右箭头-->
<span>></span>
</div>
<div id="anniu"> <!--五个按钮-->
<p class="yans"></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div id="tup">
<img class="tup-1" src='img/1.jpg' /> <!--五张图片-->
<img src='img/2.jpg' />
<img src='img/3.jpg' />
<img src='img/4.jpg' />
<img src='img/5.jpg' />
</div>
</div>
二、轮播图CSS布局
定义全局变量,清除页面对创建CSS布局时的影响。设置图片大小为100%;给最大div设成相对定位。通过给第一张图片设置ID让它显示图片,其它隐藏起来。
* {
/*全局选择器*/
margin: 0; /*外边距*/
padding: 0; /*内边距*/
}
img {
display: none; /*隐藏图片*/
}
#tup img {
width: 100%;
height: 100%;
}
#box {
position: relative; /*设置相对定位*/
}
.tup-1 {
display: block; /*显示图片*/
}
设置左、右箭头的样式,通过设置绝对定位参照父级元素进行定位,给按钮添加颜色样式。更改箭头的透明度,字体大小,实现椭圆效果等。
#left {
background-color: #000000;
opacity: 0.5; /*透明度*/
position: absolute; /*设置绝对定位*/
font-size: 50px;
top: 40%;
color: lightsteelblue;
cursor: pointer; /*设置鼠标小手*/
}
#right {
background-color: #000000;
opacity: 0.5;
position: absolute; /*设置绝对定位*/
font-size: 50px;
top: 40%;
right