JavaScript实现轮播图

最新推荐文章于 2022-09-07 18:00:48 发布

程序员班长

最新推荐文章于 2022-09-07 18:00:48 发布

阅读量962

点赞数 1

分类专栏： Web前端文章标签： javascript html5

本文链接：https://blog.csdn.net/KK_2018/article/details/104967514

版权

Web前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

功能：

1、图片会自动播放，鼠标放上面会暂停播放

2、点击左右出现的箭头可以切换到上一张/下一张图片

3、点击序号会跳转到对应图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>当当网首页轮播图-By小黑</title>
    <style>
      *{
        padding: 0;
        margin: 0;
        list-style: none;
      }
      #wrap{
        margin: 50px auto;
        width: 800px;
        height: 330px;
        overflow: hidden;
        position: relative;
      }
      #list{
        position: absolute;
        bottom: 15px;
        right: 250px;
      }
      #list li{
        float: left;
        margin-right: 15px;
        cursor: pointer;
        width: 23px;
        height: 23px;
        line-height: 23px;
        text-align: center;
        background: #ADA79D;
        color: #FFF ;
        border-radius: 50%;
      }
      #list .on{
        background: red;
      }
      #bar_left,#bar_right{
        width: 33px;
        height: 80px;
        line-height: 80px;
        position: absolute;
        top: 130px;
        background: rgba(0, 0, 0, 0.3);
      }
      #bar_left{
        left: -33px;
      }
      #bar_right{
        right: -35px;
      }
      /*下面利用伪元素实现左侧和右侧的小箭头*/
      #bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{
        content: "";
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        position: absolute;
        top: 25px;
      }
      /*左边箭头*/
      #bar_left:before{
        border-left: 15px solid transparent;
        border-right: 15px solid #FFF;
        right: 10px;
      }
      #bar_left:after{
        border-left: 15px solid transparent;
        border-right: 15px solid rgba(0, 0, 0, 0.3);
        right: 7px;
      }
      /*右边箭头*/
      #bar_right:before{
        border-right: 15px solid transparent;
        border-left: 15px solid #FFF;
        left: 10px;
      }
      #bar_right:after{
        border-right: 15px solid transparent;
        border-left: 15px solid rgba(0, 0, 0, 0.3);
        left: 7px;
      }
      #wrap:hover #bar_left{
        left: 0;
        cursor: pointer;
        transition: left 0.5s;
      }
      #wrap:hover #bar_right{
        /* display: block; */
        right: 5px;
        cursor: pointer;
        transition: right 0.5s;
      }
      .tex{
        margin: 20px auto;
        width: 400px;
      }
      .tex ul li{
        list-style-type:circle;
        color: red;
        font-weight: bold;
        margin-bottom: 5px;
      }
    </style>
</head>

<body>
  <div id="wrap">
    <ul id="pic">
      <li><img src="images/dang1.jpg" alt=""></li>
      <li><img src="images/dang2.jpg" alt=""></li>
      <li><img src="images/dang3.jpg" alt=""></li>
      <li><img src="images/dang4.jpg" alt=""></li>
      <li><img src="images/dang5.jpg" alt=""></li>
      <li><img src="images/dang6.jpg" alt=""></li>
      <li><img src="images/dang7.jpg" alt=""></li>
      <li><img src="images/dang8.jpg" alt=""></li>
    </ul>
    <div id="bar_left"></div>
    <div id="bar_right"></div>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ol>
  </div>
  <div class="tex">
    <ul>
      <li>功能如下：</li>
      <li>图片会自动播放，鼠标放上面会暂停播放</li>
      <li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
      <li>点击序号会跳转到对应图片</li>
    </ul>
  </div>
  <script>
    var wrap=document.getElementById('wrap');
    var pics=document.getElementById('pic');
    var lists=document.getElementById('list').getElementsByTagName('li');
    var point_l=document.getElementById('bar_left');
    var point_r=document.getElementById('bar_right');
    var index=0;
    var counter=null;
    function change(){//计时器
      counter=setInterval(function(){
        index++;
        if(index===lists.length){
          index=0;
        }
        img(index);
      },2000)
    }
    change();
    function img(curIndex){//切换图片
      for (var i=0;i<lists.length;i++){
        if(curIndex===i){
          lists[i].className='on';
        }
        else{
          lists[i].className='';
        }
      }
      index=curIndex;
      pics.style.marginTop=-330*curIndex+'px';//图片上移
      wrap.onmouseover=function(){//鼠标放到图片上时图片停止播放
        pics.style.cursor="pointer";
        clearInterval(counter);//清除计时器
      }
      pics.onmouseout=change;
    }
    //鼠标放到指定序号切换到指定图片
    for (var i=0;i<lists.length;i++){
      lists[i].id=i;
      lists[i].onmouseover=function(){
        img(this.id);
        this.className='on';
      }
    }
    //当鼠标放在箭头上时，点击箭头切换到下一张图片
    point_l.onmousedown=function(){//点击左边箭头
      if(index<=0){
          index=lists.length;
      }
      img(index-1);
    }
    point_r.onmousedown=function(){//点击右边箭头
      if (index>=lists.length-1){
        index=-1;
      }
      img(index+1);
    }
  </script>
</body>

</html>

效果图

程序员班长

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现轮播图

功能：1、图片会自动播放，鼠标放上面会暂停播放2、点击左右出现的箭头可以切换到上一张/下一张图片3、点击序号会跳转到对应图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>当当网首页轮播图-By小黑</t...
复制链接

扫一扫