js简单实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

鸵鸟吃补丁

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量103

点赞数

分类专栏： javaweb 文章标签： js

本文链接：https://blog.csdn.net/qq_45648136/article/details/117930951

版权

javaweb 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

text1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<html>
<body>
  <div id="box">
      <img id="pic" src="./image/1.jpg" alt="加载失败！">
      <ul id="list">
        <li>1</li>
        <li>2</li>
      </ul>
      <div id="left" class="bt"><</div>
      <div id="right" class="bt">></div>
  </div>
  <script type="text/javascript" src="js1.js"></script>
</body>
</html>

css.css

*{margin: 0;padding: 0;}
#box{height: 350px;width: 700px;margin: 0 auto;position: relative;}
.bt{width: 4rem;height: 6rem;background-color: rgba(0,0,0,0.2);color: #fff;font-size: 3rem;
line-height: 5.2rem;text-align: center;position: absolute;top:130px;display: none;}
#left{left: 0;}
#right{right: 0;}
#list{position: absolute;bottom: 1rem;left: 21rem;}
#list li{list-style: none;float: left;width: 30px;height: 30px;background-color: #aaa;border-radius:70%;
text-align: center;margin-left: 10px;line-height: 30px;}

js1.js

var jsbox=document.getElementById("box")
var jspic=document.getElementById("pic")
var jslistArr=document.getElementsByTagName("li")
var jsle=document.getElementById("left")
var jsri=document.getElementById("right")

// 第一个li背景设置为白色
jslistArr[0].style.backgroundColor="white"
// 启动一个定时器，更换src属性
var currentpage=1;
var timer=setInterval(start,1000)
function start() { 
    currentpage++;
    changepage()
 }
function changepage() { 
     if(currentpage==3){
         currentpage=1
     }else if(currentpage==0){
        currentpage=2
     }
    jspic.src="./image/"+currentpage+".jpg"
    
    // li轮播变颜色
    // 先清空所有li的颜色
    for(let i=0;i<jslistArr.length;i++){
        jslistArr[i].style.backgroundColor="#aaa"
    }
    jslistArr[currentpage-1].style.backgroundColor="white"
  }


//鼠标进入box,图片停止
jsbox.addEventListener("mouseover",function (e) {  
   //停止定时器
   clearInterval(timer)
   //显示左右按钮
   jsle.style.display="block"
   jsri.style.display="block"

 },false)

//鼠标移出box,图片运行
 jsbox.addEventListener("mouseout",function (e) {  
    //重启定时器
    timer=setInterval(start,1000)
    //隐藏左右按钮
    jsle.style.display="none"
   jsri.style.display="none"
  },false)

// 左右按钮
// 移入颜色变深
jsle.addEventListener("mouseover",deep,false)
jsri.addEventListener("mouseover",deep,false)
function deep() {
    jsle.style.backgroundColor="rgba(0,0,0,0.6)"
    jsri.style.backgroundColor="rgba(0,0,0,0.6)"
  }
// 移出颜色恢复
jsle.addEventListener("mouseout",nodeep,false)
jsri.addEventListener("mouseout",nodeep,false)
function nodeep() {
    jsle.style.backgroundColor="rgba(0,0,0,0.2)"
    jsri.style.backgroundColor="rgba(0,0,0,0.2)"
  }
// 点击左右按钮
jsle.addEventListener("click",function(){
    currentpage--;
    changepage()
} ,false)

// 进入圆点
for(let i=0;i<jslistArr.length;i++){
    jslistArr[i].addEventListener("mouseover",function () { 
        currentpage=parseInt(this.innerHTML)
        changepage()
     },false)
}

效果
在这里插入图片描述

鸵鸟吃补丁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单实现轮播图

text1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://libs.b
复制链接

扫一扫