|
1. 最简单的轮播图
效果如下：  这个实现非常简单，就是使用相对定位和绝对定位，将这三张图片压在一块。然后搞一个定时器，当到下一张图片的时候，把当前这张图片相应的标签上设置它的属性display,把它设置为none，之后把下一张图片相应的标签上设置它的属性display的值为block即可。(当然也可以设置属性z-index的值，总之实现方式还是很多。) 实现代码如下：
DOCTYPE html>
轮播图_1
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.carousel{
width: 509px;
height: 212px;
margin: 0 auto;
position: relative;
/*去掉li标签前面的图标*/
}
.carousel ul:nth-of-type(1){
width: 100%;
height: 100%;
position: relative;
}
.carousel ul:nth-of-type(1) li{
position: absolute;
top: 0;
left: 0;
}
.carousel ul:nth-of-type(1) li img{
width: 509px;
height: 212px;
}
.active{
display: block;
}
.btn_at{
background-color: gold;
}
.btn_unat{
background-color: white;
}
.unactive{
display: none;
}
.carousel button{
color: black;
position: absolute;
height: 100%;
font-size: 25px;
font-weight: bold;
background-color: transparent;
border-width: 0;
color: white;
display: none;
}
.carousel .left_btn{
top: 0;
left: 0;
}
.carousel .right_btn{
top: 0;
right: 0;
vertical-align: middle;
}
.carousel ul:nth-of-type(2){
position: absolute;
bottom: 6px;
width: 16%;
height: 5%;
left: 42%;
}
.carousel ul:nth-of-type(2) li{
float: left;
border-radius: 100%;
width: 8px;
height: 8px;
margin: 2px 10.7%;
}
;
;
var img_index = 0
var lis_1 = document.querySelectorAll("#imgs li")
var lis_2 = document.querySelectorAll("#btns li")
var left_btn = document.querySelector(".left_btn")
var right_btn = document.querySelector('.right_btn')
var carousel = document.querySelector('.carousel')
var timeId
function clear_img(){
lis_1.forEach(function(ele){
ele.className='unactive'
})
}
function clear_btn(){
lis_2.forEach(function(ele){
ele.className='btn_unat'
})
}
function changePicture1(){
img_index++
if(img_index>2){
img_index=0
}
clear_img()
clear_btn()
lis_1[img_index].className='active'
lis_2[img_index].className='btn_at'
}
function changePicture2(){
img_index--
if(img_index
clearInterval(timeId)
}
function start(){
timeId = setInterval(changePicture1,3000)
}
lis_2.forEach((ele,index)=>{
ele.onclick=function(){
stop()
clear_btn()
clear_img()
lis_1[index].className='active'
lis_2[index].className='btn_at'
img_index = index
}
})
left_btn.onclick=function(){
stop()
changePicture2()
}
right_btn.onclick=function(){
stop()
changePicture1()
}
carousel.addEventListener('mouseover',function(){
left_btn.style.display='block'
right_btn.style.display='block'
this.style.opacity=0.5
},false)
carousel.addEventListener('mouseout',function(){
left_btn.style.display='none'
right_btn.style.display='none'
this.style.opacity=1
},false)
window.addEventListener('blur',()=>{
stop()
console.log('终止监听')
},false)
window.addEventListener('focus',()=>{
start()
console.log('开始监听')
},false)
2. 具有滑动效果的轮播图
因为用js实现这个效果，每次移动像素点只有1，所有读者看到上述图片效果并不怎么好，如果把js相应的实现部分改一改，这个效果和CSDN官网轮播图效果还是有的一比的
其实实现这个效果，就是把这三张图片放在一个盒子内部(div)，当然还是用到相对定位和绝对定位，只不过它们不是压在一块，而是横排在一行上，当然每一张图片相应的标签的属性left的值不是相同的。
window.onload=function(){
lis_1.forEach((ele,index)=>{
ele.style.left=509*index+'px'
})
}
上述代码就是实现每一张图片相应的标签的属性left的值不是相同的。
实现图片滑动效果需要用到两个定时器，外部的定时器，用于实现图片滑动之后休眠效果，内部定时器实现图片滑动效果。
两个定时器的实现代码如下：
function remover_1(){
lis_1.forEach((ele,index)=>{
var left_value = parseFloat(ele.style.left)
left_value-=1
var width = 509
if(left_value
removeId = setInterval(remover_1,1)
}
timeId = setInterval(remover_2,5000)
另外，还需要设置监听，如果不设置，就会存在一个BUG，就是离开浏览器之后很久，然后再来看这个轮播图的效果，你会发现，那些图片向左边滑动太快了。 
window.addEventListener('focus',()=>{
start()
console.log('开始监听')
},false)
window.addEventListener('blur',()=>{
stop()
console.log('取消监听')
},false)
下边小圆点和左右点击按钮实现效果需要注意相应的逻辑，小编在这里就不一一讲解了。因为实现代码有点多，小编在这里就贴出来，有兴趣的读者可以到小编这里来下载哈！下载链接为：https://download.csdn.net/download/qq_45404396/71987933
3. 具有滑动效果且三张图片同时显示
实现效果如下： 
因为在CSDN上上传图片最大只能5MB,上述图片其实是小编经过处理的，其实原本效果没有滑动这么快。
实现这个效果和小编上述第二点讲到那个轮播图实现原理基本一样，但是这里显示了三张图片，为了让轮播效果和实现相符，布局方面有一点不一样，用到了6张图片(其实主要是3张图片，另外三张图片基本重复前面三张图片)，如下：
 这个代码也有点多，就不贴出来了，想要的读者可以到看第二点最后面的那个链接。
|