轮播图制作，详细步骤及HTML+CSS+JS完整代码1.轮播图的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"href="style/index.css">
<script src="js/index.js"></script>
<script src="js/animate.js"></script>
</head>
<body>
<div class="banners">
<ul class="images">
<!-- 核⼼滚动区 -->
<li>
<a href="#"><img src="images/test1.jpg"alt=""></a>
</li>
<li>
<a href="#"><img src="images/test3.jpg"alt=""></a>
</li>
<li>
<a href="#"><img src="images/test4.jpg"alt=""></a>
</li>
<li>
<a href="#"><img src="images/test5.jpg"alt=""></a>
</li>
</ul>
<!-- 左箭头 -->
<a href="javascript:;"class="prev"><</a>
<!-- 右箭头 -->
<a href="javascript:;"class="next">></a>
<!-- ⼩圆点 -->
<ul class="dots">
<!-- li 可⽤js动态⽣成-->
</ul>
</div>
</body>
</html>html如何设置图片滚动
2. 轮播图样式
新建style⽂件夹 和⾥⾯的index.css⽂件 内容如下：
/* 1. 样式重置 */
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/* 外层盒⼦样式，左右箭头和⼩圆点都要采⽤绝对定位，所以其⽗盒⼦要采⽤相对定位*/
.banners{
position: relative;
overflow: hidden;
width: 520px;
height: 280px;
margin: 100px auto;
}
/*滚动区包裹所有图⽚的盒⼦宽度要⾜够宽可以放下所有的图⽚*/
/*滚动区包裹所有图⽚的盒⼦宽度要⾜够宽可以放下所有的图⽚*/ .images{
position: absolute;
top: 0;
left: 0;
width: 700%;
}
/* 对图⽚使⽤浮动使其排列在⼀⾏*/
.images li{
float: left;
}
/* 图⽚⼤⼩会撑⼤盒⼦，设置图⽚⼤⼩ */
.banners img{
width: 520px;
height: 280px;
}
/*左右箭头相同样式*/
.prev,
.next{
display: none;
position: absolute;
/* 绝对定位的盒⼦垂直居中 */
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background:rgba(0,0,0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
/*左箭头靠左定位*/
.prev{
left: 0;
/* 设置圆⾓ */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
/*右箭头靠右定位*/
.next{
right: 0;
/
* 设置圆⾓ */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
/* ⼩圆点外层盒⼦的样式 */
.dots{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
height: 13px;
background:rgba(255,255,255, .3);
border-radius:7px;
}
/* ⼩圆点样式*/
.dots li{
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
/* ⼩圆点被点击的样式 */
/* ⼩圆点被点击的样式 */
.dots .active{
background-color: #ff5000;
}
3. 轮播图功能
1. ⿏标经过轮播图 左右箭头显⽰， ⿏标离开 左右箭头隐藏；
2. 点击左右箭头，图⽚切换，底下的⼩圆点也会对应变化
3. 点击⼩圆点，也能实现切换图⽚效果
4. ⿏标不经过轮播图，⾃动播放
5. ⿏标经过轮播图，⾃动播放停⽌
新建js⽂件夹和⾥⾯的index.js⽂件，内如如下
window.addEventListener('load',function(){
//1. 获取元素
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var banners = document.querySelector('.banners')
//2. ⿏标经过，显⽰左右按钮
banners.addEventListener('mouseenter',function(){
prev.style.display ='block';
next.style.display ='block';
clearInterval(timer);
timer =null;//清除计时器
});
//3. ⿏标离开，隐藏左右按钮
banners.addEventListener('mouseleave',function(){
prev.style.display ='none';
next.style.display ='none';
timer =setInterval(function(){
// 轮播图⾃动切换相当于点击右箭头
next.click();
},2000);
});
// 4. 动态⽣成⼩圆圈有⼏张图⽚，就⽣成⼏个⼩圆圈
var images = document.querySelector('.images');
var dots = document.querySelector('.dots');
var banners_width = banners.offsetWidth;
for(var i =0; i < images.children.length; i++){
//创建⼀个⼩li
var li = ateElement('li');
//记录当前⼩圆圈的索引号通过创建⾃定义属性来做
li.setAttribute('index', i);
dots.appendChild(li);
/
/5. ⼩圆圈的排他思想可以直接在⽣成⼩圆圈的同时直接绑定点击事件 li.addEventListener('click',function(){
for(var i =0; i < dots.children.length; i++){
dots.children[i].className ='';
}
this.className ='active';
// 6. 点击⼩圆圈，移动图⽚，本质移动的是ul
//ul 的移动距离就是⼩圆圈的索引号 * 图⽚的宽度注意是负值
// 当我们点击了某个⼩li 就拿到它的index属性
var index =Attribute('index');
//当我们点击了某个⼩li 就要把这个⼩li 的index给num
num = index;
circle = index;
animate(focus,-index * banners_width);
})
}
//把dots ⾥⾯的第⼀个⼩li设置类名为 active
dots.children[0].className ='active';
// 实现滑动到最后⼀张照⽚时可以平滑地过渡到第⼀张，克隆第⼀张图⽚放在ul最后⾯，在其后克隆⼩圆点不会多var first = images.children[0].cloneNode(true);
images.appendChild(first);
// 点击右侧按钮，图⽚滚动⼀张
var num =0;
//circle 控制⼩圆圈的播放
var circle =0;
next.addEventListener('click',function(){
// 如果⾛到了最后复制的⼀张图⽚，此时的ul要快速复原 left值改为零
if(num == images.children.length -1){
images.style.left =0;
num =0;
}
num++;
animate(images,-num * banners_width);
// 8. 点击右侧按钮，⼩圆圈跟随⼀起变化
circle++;
if(circle == dots.children.length){
circle =0;
}
circleChange();
})
//左侧按钮点击事件
prev.addEventListener('click',function(){
// 如果⾛到了最后复制的⼀张图⽚，此时的ul要快速复原 left值改为零
if(num ==0){
num = images.children.length -1;
images.style.left =-num * banners_width +'px';
}
num--;
animate(images,-num * banners_width)
// 8. 点击右侧按钮，⼩圆圈跟随⼀起变化
circle--;
circle = circle <0? dots.children.length -1: circle;
//调⽤函数
circleChange();
})
function circleChange(){
for(var i =0; i < dots.children.length; i++){
dots.children[i].className ='';
}
dots.children[circle].className ='active';
}
var timer =setInterval(function(){
//⼿动调⽤点击事件
next.click();
},2000);
})
新建js⽂件⾥的animate⽂件 内容如下：
function animate(obj, target,callback){
/
/让元素只有⼀个定时器在执⾏，需要清除以前的定时器clearInterval(obj.timer);
obj.timer =setInterval(function(){
var step =(target - obj.offsetLeft)/10;
step = step >0? il(step): Math.floor(step);
if(obj.offsetLeft == target){
//停⽌动画本质是停⽌定时器
clearInterval(obj.timer)
//回调函数写到定时器结束位置
if(callback){
callback();
}
}
//把每次加1这个步长值改为⼀个慢慢变⼩的值
obj.style.left = obj.offsetLeft + step +'px';
},15);
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论