JQ学习第三天作业----轮播图

最新推荐文章于 2024-10-09 13:13:15 发布

刚开始学web的小白

最新推荐文章于 2024-10-09 13:13:15 发布

阅读量87

点赞数

文章标签： js html css jquery

本文链接：https://blog.csdn.net/weixin_44645636/article/details/106961848

版权

经过三天的学习，我掌握了足够的JQ知识，成功制作了一个轮播图。主要涉及HTML布局、CSS样式设计以及JQuery动态效果的实现。

摘要由CSDN通过智能技术生成

JQ学习三天后终于能做个轮播图了

HTML结构部分

<div class="list">
       <div class="img choose">
            <img src="img/0.jpg" alt="">
        </div>
        <div class="img">
            <img src="img/1.jpg" alt="">
        </div>
        <div class="img">
            <img src="img/2.jpg" alt="">
        </div>
        <div class="img">
            <img src="img/3.jpg" alt="">
        </div>
        <div class="img">
            <img src="img/4.jpg" alt="">
        </div>
        <div class="btns">
            <span class="choose"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

CSS部分

     * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list {
            width: 560px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .list .img {
            width: 560px;
            height: 300px;
            position: absolute;
            left: 560px;
            background-color: #f00;
        }
        .left, 
        .right {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 50px;
            margin-top: -25px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.6);
            font-size: 30px;
            text-align: center;
            line-height: 50px;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }
        .btns {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 30px;
            text-align: center;
        }
        .btns span {
            padding: 6px;
            margin: 0 6px;
            font-size: 0;
            background-color: #fff;
            border-radius: 50%;
        }
        .btns span.choose {
            background-color: #f00;
        }

JQuery代码部分

	//<script src="jquery.js"></script>记得先引入JQ文件哟
	//<script>
   		var imgs = $(".list .img");
        var btns = $(".btns span");
        var left = $(".left");
        var right = $(".right");
        var index = 0;
        var timebar;
        //自动轮播图
        imgs.eq(0).css('left', 0);
        function start() {
                timebar = setInterval(function () {
                rightMove();
            },2000)
        }
        start();
        //圆点轮播图
        btns.mouseover(function () {
            index = $(this).index();
            imgs.eq(index).css({left: 0}).siblings(".img").css({left:-560})
            btns.eq(index).addClass("choose").siblings().removeClass("choose")
            clearInterval(timebar)
        })
        btns.mouseleave(function () {
            index = $(this).index();
            start(); 
        })
        //左右轮播图
        left.click(function () {
            clearInterval(timebar)
            leftMove()
        })
        left.mouseleave(function () {
            start();
            
        })
        right.click(function () {
            clearInterval(timebar);
            rightMove();
           
        })
        right.mouseleave(function () {
            start();
            
        })
        function rightMove() {  
            imgs.eq(index).animate({left: -560 },500)
                index++;
                if (index >= 5) {
                index = 0;
                }
                imgs.eq(index).css('left', 560).animate({ left: 0 }, 500)
                btns.eq(index).addClass("choose")
                    .siblings().removeClass("choose")
        }
        function leftMove() {
            imgs.eq(index).animate({left: 560},500)
            index--;
            if (index < 0) {
                index = 4;  
            }
            imgs.eq(index).css("left",-560).animate({left: 0},500)
            btns.eq(index).addClass("choose").siblings().removeClass("choose")
        }
 	//</script>