jQuery----无缝轮播图

最新推荐文章于 2022-04-10 11:17:55 发布

weixin_33979745

最新推荐文章于 2022-04-10 11:17:55 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SunlikeLWL/p/7351715.html

本文详细介绍了使用HTML、CSS和JavaScript实现轮播图的方法，并针对轮播图从头到尾和从尾到头的切换难点提供了具体解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果

2、html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/slide.less">

</head>
<body>
    <div class="slide-container"></div>
    <script type="text/javascript" src='js/jquery-2.2.1.min.js'></script>
    <script type="text/javascript" src = 'js/slide.js'></script>
</body>
</html>

3、less代码

.slide-container{
	width: 1000px;
    height: 560px;
	margin: 0 auto;
	box-shadow: 0 0 10px 3px gray;
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	.slide-box{
		width: 1000px;
		height: 560px;
		transition: all 0.4s linear;
		.slide-list{
			height: 560px;
			overflow: hidden;
			display: inline-block;
			float: left;
			img{
				width: 1000px;
				height: 100%;
			}
		}
		.first-one{
			position: absolute;
			top: 0;
			left: -1000px;
		}
	   .last-one{
	   	position: absolute; 
	   	top: 0;
	   	right: -1000px;
	   }
	}
	.slide-btn{
		width: 80px;
		height: 560px;
		background-color: rgba(0,0,0,0.4);
		position: absolute;
		z-index: 3;
		top: 0;
		text-align:center;
		transition: all 0.3s linear;
		cursor: pointer;
		i{
			color: white;
			font-size: 40px;
			line-height: 560px;
		}
	}
	.slide-left-btn{
         left: 0;
         transform: translateX(-80px);
	}
	.slide-right-btn{
         right: 0;
         transform: translateX(80px);
	}
	&:hover{
		.slide-left-btn{
              transform:translateX(0);
		}
		.slide-right-btn{
              transform:translateX(0);
		}
		.slide-menu{
			visibility: visible;
		}
	}
	.slide-menu{
		 visibility: hidden;
		 position: absolute;
		 bottom: 20px;
		 z-index: 3;
		 left: 50%;
		 transform: translateX(-50%);
		 display: inline-block;
		 width: auto;
		 height: 56px;
		 text-align: center;
		 white-space: nowrap;
		 padding: 20px;
		 background-color: rgba(0,0,0,0.4);
		.list{
			display: inline-block;
			width: 100px;
			height: 56px;
			overflow: hidden;
			border: 2px solid white;
			margin: 4px;
			img{
				display: inline-block;
				width: 100px;
				height: 56px;
				background-color: red;
				border-radius: 10px;
				margin: 0 10px 0 10px;
				cursor: pointer;
			}
			&:hover{
				border: 2px solid red;
			}
		}
		.choose{
			border: 2px solid red;
		}
	}
}

3、js代码

var imgObj = {
    "imgList": [
        { "name": "name1", "url": "imgs/1.jpg", "detail": "1号宝贝", "link": "http://www.hao123.com" },
        { "name": "name2", "url": "imgs/2.jpg", "detail": "2号宝贝", "link": "http://www.baidu.com" },
        { "name": "name3", "url": "imgs/3.jpg", "detail": "3号宝贝", "link": "http://www.w3cschool.com" },
        { "name": "name4", "url": "imgs/4.jpg", "detail": "4号宝贝", "link": "http://www.taobao.com" },
        { "name": "name2", "url": "imgs/5.jpg", "detail": "5号宝贝", "link": "http://www.jd.com" },
        { "name": "name3", "url": "imgs/6.jpg", "detail": "6号宝贝", "link": "http://www.lianxiang.com" },
        { "name": "name4", "url": "imgs/7.jpg", "detail": "7号宝贝", "link": "http://www.meituan.com" }
    ]
}

var parent = $(".slide-container");
var now_index = 1;
var prev_index = 1;
var len = imgObj.imgList.length;
var imgList = imgObj.imgList;
var is_active = true; //是否自动轮播
var is_running = true;
creatSlide();

function creatSlide() {
    initSlide();
    addSlideOperation();
    addClock(is_active);

    function initSlide() {
        parent.empty();
        var rightBtn = $("<div class='slide-left-btn slide-btn'>" +
            "<i class='iconfont icon-left-copy'></i>" +
            "</div>");
        var leftBtn = $("<div class='slide-right-btn slide-btn'>" +
            "<i class='iconfont icon-right-copy'></i>" +
            "</div>");
        parent.append(rightBtn);
        parent.append(leftBtn);

        var slideBox = $("<div class='slide-box'></div>");
        slideBox.css("width", (len * 1000) + "px");



        var slideList = $("<div class='slide-list first-one'>" +
            "<a href='" + imgList[len - 1].url + "'>" +
            "<img src='static/imgs/" + len + ".jpg'>" +
            "</a>" +
            "</div>");
        slideBox.prepend(slideList);
        for (var i = 0; i < len; i++) {

            var slideList = $("<div class='slide-list'>" +
                "<a href='" + imgList[i].url + "'>" +
                "<img src='static/imgs/" + (i + 1) + ".jpg'>" +
                "</a>" +
                "</div>");
            slideBox.append(slideList);
        }
        var slideList = $("<div class='slide-list last-one'>" +
            "<a href='" + imgList[1].url + "'>" +
            "<img src='static/imgs/" + (1) + ".jpg'>" +
            "</a>" +
            "</div>");
        slideBox.append(slideList);


        parent.append(slideBox);
        var slideMenu = $("<div class='slide-menu'></div>");
        for (var j = 0; j < len; j++) {
            var menuList = $("<div class='list list" + (j + 1) + "'>" +
                "<img src='static/imgs/" + (j + 1) + ".jpg'>" +
                "</div>");
            if (j == 0) {
                menuList.addClass("choose");
            }
            slideMenu.append(menuList);
        }
        parent.append(slideMenu);
    }


    function addSlideOperation() {
        var slideBox = parent.find(".slide-box");
        var slideMenu = parent.find(".slide-menu");

        //左键
        parent.on("click", ".slide-left-btn", function() {

            if (is_running) {
                is_running = false;
                if (now_index < len) {
                    now_index++;
                    console.log(now_index);
                    slideBox.attr("style", "width: " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);");
                    var tar = slideMenu.find(".list" + now_index);
                    tar.addClass("choose");
                    tar.siblings().removeClass("choose");
                } else if (now_index == len) {

                    now_index = 1;

                    slideBox.attr("style", "transition:all 0.3s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + (-(len) * 1000) + "px);");
                    setTimeout(function() {
                        slideBox.attr("style", "transition:all 0s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + (0) + "px);");
                    }, 300)
                    var tar = slideMenu.find(".list" + 1);
                    tar.addClass("choose");
                    tar.siblings().removeClass("choose");
                }
                is_running = true;
            }
        })

        //右键
        parent.on("click", ".slide-right-btn", function() {

            if (is_running) {
                is_running = false;
                if (now_index > 1) {
                    now_index--;
                    console.log(now_index);
                    slideBox.attr("style", "width: " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);");
                    var tar = slideMenu.find(".list" + now_index);
                    tar.addClass("choose");
                    tar.siblings().removeClass("choose");
                } else if (now_index == 1) {
                    now_index = len;
                    slideBox.attr("style", "transition:all 0.3s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + (1000) + "px);");
                    setTimeout(function() {
                        slideBox.attr("style", "transition:all 0s linear;width: " + ((len) * 1000) + "px;transform:translateX(" + ((1 - len) * 1000) + "px);");
                    }, 300)
                    var tar = slideMenu.find(".list" + len);
                    tar.addClass("choose");
                    tar.siblings().removeClass("choose");
                }
                is_running = true;
            }
        })

        //小图选取
        parent.on("click", ".slide-menu .list", function() {
            now_index = $(this).index() + 1;
            console.log(now_index);
            slideBox.attr("style", "width: " + (len * 1000) + "px;transform:translateX(" + (-(now_index - 1) * 1000) + "px);");
            $(this).addClass("choose");
            $(this).siblings().removeClass("choose");
        })

        //mouseover 停止自动轮播
        parent.on("mouseover", function() {
            active = false;
            addClock(active);
        })

        //mouseout 停止自动轮播
        parent.on("mouseout", function() {
            active = true;
            addClock(active);
        })
    }


    function addClock(active) {
        var active = active;
        if (active) {
            clock = setInterval(function() {
                var is_right = parseInt(Math.random());
                if (is_right) {
                    parent.find(".slide-right-btn").click();
                } else {
                    parent.find(".slide-left-btn").click();
                }
            }, 3000)
        } else {
            clearTimeout(clock);
        }
    }

}

　　4、总结

轮播图实现的难点在于头调到尾，尾调到头，为实现这个我在头尾加了两个块来实现

转载于:https://www.cnblogs.com/SunlikeLWL/p/7351715.html