首页 > Web开发 > 详细

jQuery----无缝轮播图

时间:2017-08-12 23:56:06      阅读:464      评论:0      收藏:0      [点我收藏+]

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----无缝轮播图

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!