通过JS实现轮播图

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

一只懒得睁眼的猫

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

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： js 轮播图

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

博客参考：
1、http://blog.csdn.net/a2011480169/article/details/76218022
（绝对定位和相对定位）
2、轮播图
http://www.jb51.net/article/94598.htm
3、定时器和计时器
http://blog.csdn.net/a2011480169/article/details/76706014
4、css中的overflow属性
参考文档：如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
链接：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
链接：http://www.w3school.com.cn/tiy/t.asp?f=csse_overflow
效果展示：

自己的版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery实现轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 700px;
            height: 320px;
            position: relative;
            /*通过下面这行设置将标签div.box进行居中*/
            margin: 100px auto;
            border: red 1px solid;
            /*如果标签里面的内容多了出来,则自动隐藏掉*/
            overflow: hidden;
        }

        a.show_img{
            position: absolute;
            top:0px;
            left: 0px;
        }

        a.show_img > img{
            /*我在这里将图片的大小设置为和box的大小一样*/
            width: 700px;
            height: 320px;
        }

        div.btn{
            position: absolute;
            /*设置文本颜色*/
            color: #fff;
            top:110px;
            height: 100px;
            width: 40px;
            background-color: rgba(255,255,255,.3);
            /*font-size 属性可设置字体的尺寸*/
            font-size: 40px;
            /*font-weight 属性可设置字体的粗细*/
            font-weight: bold;
            text-align: center;
            line-height:100px;
            /*为元素添加圆角边框*/
            border-radius: 5px;
        }

        div.btn1{
            left: 5px;
        }

        div.btn2{
            right: 5px;
        }

        /*设置两个箭头的触摸效果*/
        div.btn:hover{
            background-color: rgba(0,0,0,.7);
        }

        #tabs{
            position: absolute;
            list-style: none;
            background-color: rgba(255,255,255,.5);;
            left: 300px;
            bottom: 10px;
            border-radius: 10px;
            /*padding的设置很重要*/
            padding: 5px 5px 5px 5px;
        }

        li.tab{
            float: left;
            text-align:center;
            line-height: 20px;
            /*尺寸的设置正好凑成100px*/
            width: 20px;
            height: 20px;
            cursor: pointer;
            overflow: hidden;
            margin-right: 4px;
            border-radius: 100%;
            background-color: rgb(200,100,150);
        }

        .bg{
            /*在这里不知道为什么background-color没有效果*/
            color: firebrick;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <a  class="show_img" href="#"><img src="https://img30.360buyimg.com/da/jfs/t10846/118/921740535/144783/d565804f/59dacf8fN41cce70e.jpg" alt="图片1"></a>
        <a  class="show_img" href="#"><img src="https://img1.360buyimg.com/da/jfs/t10981/350/946023540/103479/8f0c21d4/59db2821N4b9071dc.jpg" alt="图片2"></a>
        <a  class="show_img" href="#"><img src="https://img10.360buyimg.com/da/jfs/t6820/298/2308078487/205126/bb146e27/598abe88N80fb9275.jpg" alt="图片3"></a>
        <a  class="show_img" href="#"><img src="https://img12.360buyimg.com/babel/jfs/t10015/250/309157568/53139/5deda504/59cbbdd9N36042540.jpg" alt="图片4"></a>
        <a  class="show_img" href="#"><img src="https://img12.360buyimg.com/da/jfs/t7486/85/2097038085/41277/8dbf5f28/59a7a469N55f52c1a.jpg" alt="图片5"></a>
        <a  class="show_img" href="#"><img src="https://img14.360buyimg.com/babel/jfs/t10060/163/323795451/128573/a27101eb/59cc7a28N48451dd3.jpg" alt="图片6"></a>
        <a  class="show_img" href="#"><img src="https://img10.360buyimg.com/babel/jfs/t10984/42/418129198/124846/e8d52814/59cf1c7dNe3f8213f.jpg" alt="图片7"></a>
        <a  class="show_img" href="#"><img src="https://img11.360buyimg.com/babel/jfs/t9820/270/1201663909/107853/e81bef25/59ddafbcNf1363291.jpg" alt="图片8"></a>

        <!--加入两个箭头标签,凡是同类的东西一般class都会设置为一个相同的数值-->
        <div class="btn btn1"> < </div>
        <div class="btn btn2"> > </div>

        <!--设置下面5个圆框-->
        <ul id="tabs">
            <li class="tab bg">1</li>
            <li class="tab">2</li>
            <li class="tab">3</li>
            <li class="tab">4</li>
            <li class="tab">5</li>
            <li class="tab">6</li>
            <li class="tab">7</li>
            <li class="tab">8</li>
        </ul>
    </div>
</body>
<script src="jquery-3.1.1.js"></script>
<!--下面开始写jquery逻辑代码-->
<script>
    <!--通过js代码设置相应的动画效果-->
    //定义全局变量和定时器
    var i = 0;
    var timer;

    //一旦加载完页面就自动调用下面的函数
    $(function () {
        //用jquery方法默认设置第一张图片显示,其余隐藏,注意siblings的用法
        $('a.show_img').eq(0).show().siblings('a.show_img').hide();
        $('li.tab').eq(0).addClass('bg').siblings('li.tab').removeClass('bg');
        timer = setInterval(show_img,2000);

        //当鼠标经过下面的数字的时候(考虑鼠标悬停和鼠标离开两种效果)
        $('li.tab').hover(function () {
            i = $(this).index();
            //先关掉定时器
            clearInterval(timer);
            //并通过索引显示相应的效果
            show();
        },function () {
            timer = setInterval(show_img,2000);
        })

        //鼠标点击左侧箭头触发效果
        $('div.btn1').click(function () {
            clearInterval(timer);
            if (i == 0){
                i = 8; //注意此时i的数值
            }
            i --;
            show();
            timer = setInterval(show_img,2000);
        })

        //鼠标点击右侧箭头触发效果
        $('div.btn2').click(function () {
            clearInterval(timer);
            if (i == 7){
                i = -1; //注意此时i的数值
            }
            i ++;
            show();
        })

    })

    function show_img() {
        i++;
        if (i == 8){
            i = 0;
        }
        //用fadeIn()替换掉show(),用fadeOut()替换掉hide();
        $('a.show_img').eq(i).fadeIn(600).siblings('a.show_img').fadeOut(600);
        $('li.tab').eq(i).addClass('bg').siblings('li.tab').removeClass('bg');
    }

    function show() {
        $('a.show_img').eq(i).fadeIn(600).siblings('a.show_img').fadeOut(600);
        $('li.tab').eq(i).addClass('bg').siblings('li.tab').removeClass('bg');
    }

</script>

</html>

一只懒得睁眼的猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
通过JS实现轮播图

博客参考： 1、http://blog.csdn.net/a2011480169/article/details/76218022 （绝对定位和相对定位） 2、轮播图 http://www.jb51.net/article/94598.htm 3、定时器和计时器 http://blog.csdn.net/a2011480169/article/details/76706014 效果展示
复制链接

扫一扫

专栏目录