jQuery----无缝轮播图

Posted SunLike阿理旺旺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery----无缝轮播图相关的知识,希望对你有一定的参考价值。

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、总结

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

 

以上是关于jQuery----无缝轮播图的主要内容,如果未能解决你的问题,请参考以下文章

jquery简单无缝轮播图实现

无缝轮播图的一种方式原理

每次移一张图片的无缝轮播图

JS 轮播图(无缝连接的轮播图实现,含代码供参考)

jquery图片轮播思路

用jquery实现图片轮播怎么写呢求指教