• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript实现轮播图案例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下

运用定时器所写成的一个简单的轮播图,直接看代码,如下:

1.css代码

<style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           font-size: 14px;
           font-family: Arial, Helvetica, sans-serif;
       }
       .slider-box{
          width: 1226px;
          height: 460px;
          margin: 10px auto;
          overflow: hidden;
          position: relative;
       }
      .slider-box .images a{
        width: 100%;
        height: 460px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: all 2s;
       }
 
       .slider-box .images a.active{
           opacity: 1;
       }
 
       .slider-box .images a img{
           width: 100%;
           height: 100%;
           display: block;
       }
       .slider-box .nav{
           position: absolute;
           left: 0;
           top: 195px;
           width: 100%;
           /* background-color: red; */
           padding: 0 10px;
           /* height: 100px; */
       }
       .slider-box .nav a{
           background-image: url(img/icons.png);
           width: 41px;
           height: 69px;
           display: inline-block;
           background-repeat: no-repeat;
       }
       .slider-box .nav .prev{
           background-position: -84px 0;
       }
       .slider-box .nav .prev:hover{
           background-position: 0 0;
       }
       .slider-box .nav .next{
           background-position: -125px 0;
           float: right;
       }
       .slider-box .nav .next:hover{
           background-position: -42px 0;
       }
       .slider-box .pages{
           position: absolute;
           right: 20px;
           bottom: 25px;
           font-size: 0;
           width: 1186px;
           text-align: center;
           /* background-color: rebeccapurple; */
       }
       .slider-box .pages .dot{
           display: inline-block;
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background-color: rgba(0,0,0,0.4);
           margin-right: 10px;
       }
       .slider-box .pages .dot:hover{
        background-color: yellow;
       }
       .slider-box .pages .dot.active{
        background-color: yellow;
       }
 
</style>

2.html代码

<div class="slider-box">
        <div class="images">
            <!-- 以后哪张图片要想显示了,只需要添加一个
            active类就行 -->
            <a href="#" class="active">
                <img src="img/1.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/2.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/3.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/4.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/5.jpg" alt="">
            </a>
        </div>
        <div class="nav">
            <a href="javascript:;" class="prev" title="前一张"></a>
            <a href="javascript:;" class="next" title="下一张"></a>
        </div>
        <div class="pages">
            <a href="javascript:;" class="dot active"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
        </div>
</div>

3.js代码

<script>
        // 定时器切换图片的功能
        var images = document.querySelectorAll('.images a')
        var index = 0 //定义要播放的图片的索引
        var pages = document.querySelectorAll(".dot")
        var prev = document.querySelector(".prev")
        var next = document.querySelector(".next")
        // 根据索引值切换图片
        // 找到images的a标签,添加active这个类
        function showImage(idx){
            images.forEach(function(v,i){
                // idx = 1
                // i = 0 1 2 3 4
                if(i===idx){
                  v.classList.add('active')
                //控制对应点高亮
                  pages[i].classList.add("active")
 
                }else{
                    v.classList.remove('active')
                    pages[i].classList.remove("active")
                }
            })
        }
    //   showImage(3)
 
    prev.onclick = function(){
        if(index===0){
            index = images.length - 1// 4
        }else{
            index = index - 1
        }
        showImage(index)
    }
    next.onclick = function(){
        if(index===images.length-1){
            index = 0
        }else{
            index+=1
        }
        showImage(index)
    }
    var timer = setInterval(function(){
        // 定时器控制图片的切换和点击下一张的功能一样
        // 调用下一张的点击操作
        next.click()// 模拟next的点击操作
    },3000)
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
5种 JavaScript 方式实现数组扁平化发布时间:2022-02-05
下一篇:
纯JS将table表格导出到excel的方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap