second/templates/static/js/index2.js

$(function () {
    // 轮播
    var banner = new Swiper('.banner', {
        autoplay: true,//可选选项，自动滑动
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })

 

     // 轮播
    //  var banner = new Swiper('.farmsSwiper', {
    //     autoplay: true,//可选选项，自动滑动
    //     loop: true,
    //     pagination: {
    //         el: '.swiper-pagination',
    //         clickable: true,
    //     },
    // })

    // 新闻资讯滚动

    function Roll(ele, time, fun) {
        var obj = document.getElementById(ele);
        var ul = obj.children;
        var li = ul[0].children;
        console.log(li)
        if (fun) {
            var fun = fun;
        } else {
            var fun = function () { };
        }
        var t;
        if (time) {
            var time = time;
        } else {
            var time = 2500;
        }
        t = setInterval(function () {
            fun()
            $(li).eq(0).slideUp(function () {
                $(ul).append($(li).eq(0));
            });
            $(li).show();
        }, time);
        $(ul).on('mouseenter', 'li', function () {
            clearInterval(t)
        })
        $(ul).on('mouseleave', 'li', function () {
            t = setInterval(function () {
                fun()
                $(li).eq(0).slideUp(function () {
                    $(ul).append($(li).eq(0));
                });
                $(li).show();
            }, time);
        })
    }
    // Roll('farmBrief', 5000)
    // Roll('newsListDiv', 2000)
    // Roll('videoListBox', 5000,function(){
    //     $('#videoListBox .videoListUl >li').removeClass('active');
    //     $('#videoListBox .videoListUl >li').eq(1).addClass('active');
    // })
    // Roll('gardenMsg', 2000, function(){
    //     $('#gardenMsg .gardenUl >li').removeClass('active');
    //     $('#gardenMsg .gardenUl >li').eq(1).addClass('active');
    //     $('.gardenImg >img').attr('src',$('#gardenMsg .gardenUl >.active').find('.hide_farm_img').val())
    // })
    // var stu = new Roll("newsListDiv", 12);
    // 视频咨询
    // var myPlayer = videojs('my-video');
    // videojs("my-video").ready(function () {
    //     var myPlayer = this;
    //     myPlayer.play();
    // });

    // 视频咨询
    // $('#videoListBox').on('click', '.date', function () {
    //     $('#videoListBox .videoListUl >li').removeClass('active');
    //     $(this).parent().addClass('active');
    //     var myPlayer = videojs('my-video');
    //     var videoUrl = $(this).find('.hide_video_url').val();
    //     videojs("my-video", {}, function () {
    //         window.myPlayer = this;
    //         $("#mymoda .video-con #my-video source").attr("src", videoUrl);
    //         myPlayer.src(videoUrl);
    //         myPlayer.load(videoUrl);
    //         myPlayer.play();
    //     });
    //     // $('.videoBox').html('');
    //     $(".video_link").click(function () {
    //         var myPlayer = videojs('my-video');
    //         var videoUrl = $(this).find('.hide_video_url').val();
    //         videojs("my-video", {}, function () {
    //             window.myPlayer = this;
    //             $("#mymoda .video-con #my-video source").attr("src", videoUrl);
    //             myPlayer.src(videoUrl);
    //             myPlayer.load(videoUrl);
    //             myPlayer.play();
    //         });
    //         $(".click-modal").click();
    //     });
    //     // 模态窗消失时，关闭视频    
    //     $('#mymoda').on('hidden.bs.modal', function () {
    //         myPlayer.pause();
    //     });

    // })

    // 四季采摘
    $('#gardenMsg').on('click', '.gardenName', function () {
        $('#gardenMsg .gardenUl >li').removeClass('active');
        $(this).parent().addClass('active');
        // $(this).find('.hide_farm_img').val();
        $('.gardenImg >img').attr('src', $(this).find('.hide_farm_img').val())
    })

    // 导游导览
    // var map = new AMap.Map('map', {
    //     resizeEnable: true, //是否监控地图容器尺寸变化
    //     zoom: 11, //初始化地图层级
    //     center: [113.397428, 39.90923] //初始化地图中心点
    // });
    //绘制初始路径
    // var path = [];
    // path.push([113.641379, 34.574431]);
    // path.push([108.877908, 34.389461]);
    // path.push([108.350564, 22.847832]);
    // map.plugin("AMap.DragRoute", function () {
    //     route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
    //     route.search(); //查询导航路径并开启拖拽导航
    // });



    // 民宿导览
    var swiper = new Swiper('.homestay', {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 3000
        },
    });

})

// 定位
function city_change(obj){
    var txt = $(obj).html();
    alert(txt)
    $('.currCity span').html(txt);
}

// 示范区滚动
var currTop = 0;
for(var i = 0; i<4;i++){
    var cloneEle = $('.farmsUl li').eq(i).clone();
    $('.farmsUl').append(cloneEle)
}
var farmsautoplay = setInterval(() => {
    farmsScroll('+')
}, 2000);
$('.farms').mouseover(function(){
    clearInterval(farmsautoplay)
});
$('.farms').mouseout(function(){
    farmsautoplay = setInterval(() => {
        farmsScroll('+')
    }, 2000);
});
function handMove(){
    clearInterval(farmsautoplay)
}
function farmsScroll(flag){
    var allHeight = parseInt($('.farmsUl').height());
    var oneHeight = parseInt($('.farmsUl li').outerHeight());
    if(flag == '+'){
        if(currTop > -(allHeight-oneHeight*4)){
            currTop = currTop - oneHeight;
            $('.farmsUl').css('transition','all 1s ease 0s')
            $('.farmsUl').css('top',currTop);
    }else{
            currTop = 0
            $('.farmsUl').css('top',currTop);
            $('.farmsUl').css('transition','none')
        }
    }else if(flag == '-'){
        if(currTop >= 0){
            currTop = -(allHeight-oneHeight*4);
            $('.farmsUl').css('top',currTop);
            $('.farmsUl').css('transition','none')
    }else{
            currTop = currTop + oneHeight;
            $('.farmsUl').css('top',currTop);
            $('.farmsUl').css('transition','all 1s ease 0s')
        }
    }
}

var map = new AMap.Map('map', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom: 11, //初始化地图层级
    center: [113.397428, 39.90923] //初始化地图中心点
});
// var geoc = new AMap.Geocoder();
function searchWay() {
    clearWay()
    var startPath = $("#startPath").val();
    var endPath = $("#endPath").val();

    if (!startPath) {
        $("#startPath").focus();
        return;
    }
    if (!endPath) {
        $("#endPath").focus();
        return;
    }
    $('.guideMap').append('<div class="loadDiv"><img src="../static/imgs/timg.gif" /></div>')
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    });
    // 根据起终点名称规划驾车导航路线
    driving.search([
        { keyword: startPath, city: '' },
        { keyword: endPath, city: '' }
    ], function (status, result) {
        if (status === 'complete') {
            // log.success('绘制驾车路线完成');
            $('.loadDiv').remove();
        } else {
            alert('获取驾车数据失败：' + result)
            $('.loadDiv').remove();
        }
    });
}

function clearWay() {
    // 清除地图上所有添加的覆盖物
    map.clearMap();
    $('#panel').html('');
}






// 登录
function login() {
    var username = $("#username").val();
    var password = $("#password").val();
    if (!username) {
        $("#username").focus();
        return;
    }
    if (!password) {
        $("#password").focus();
        return;
    }

    // $('.notLogin').toggle();
    // $('.isLogin').toggle();
    // window.open("back_manage");

    $.ajax({
        url: 'user_land',
        data: {
            username: username,
            password: password
        },
        type: 'post',
        dataType:'json',
        success: function (data) {
            if (data.code) {
                var hrefstr = 'person_farm?name=' + data.username;
                window.location.reload();
                // $('.isLogin').toggle();
                // $('#person_farm').attr('href', hrefstr)
                // $('.userPhoto').attr('src', data.user_img)
                // $('.notLogin').hide();
                // $('.isLogin').show();
            } else if (data.code == 0) {
                $('body').append('<div class="hint">用户不存在</div>')
                setTimeout(function () {
                    $('.hint').remove();
                }, 1000)
            } else if (data.code == 2) {
                $('body').append('<div class="hint">用户名错误</div>')
                setTimeout(function () {
                    $('.hint').remove();
                }, 1000)
            } else if (data.code == 3) {
                $('body').append('<div class="hint">密码错误</div>')
                setTimeout(function () {
                    $('.hint').remove();
                }, 1000)
            } else {
                $('body').append('<div class="hint">登录失败</div>')
                setTimeout(function () {
                    $('.hint').remove();
                }, 1000)
            }
        },
        error: function (type) {

        }
    })
}
// 返回顶部
function goUp() {
    $('body,html').animate({ scrollTop: 0 }, 300)
}

function show() {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $("#back2top").fadeIn(100);
        } else {
            $("#back2top").fadeOut(100);
        }
    });
}
show();

// 农场导览弹框
$('.haciendaTxt .btn1').on('click',function(){
    $('.tourismShow .title span').html('观光路线')
    $('.tourismShow .content').html('<div style="text-align:center;width:100%;height:100%"><img  style="width:100%;height:100%" src="http://127.0.0.1:8000/static/imgs/banner2.jpg">')
    $('.tourismShow').show();
    $('.tourismShow').css('opacity',1)
})
$('.tourismShowCloseBtn').on('click',function(){
    $('.tourismShow .content').html('')
    $('.tourismShow').css('opacity',0)
    setTimeout(function(){
        $('.tourismShow').hide();
    },500)
})
var map;
$('.haciendaTxt .btn2').on('click',function(){
    $('.tourismShow .title span').html('导游导览');
    var html = '<div class="">'+
                '<div class="guideForm">起始地点：<input type="text" id="startPath"><button onclick="searchWay()">确定</button></div>'+
                '<div id="map">地图</div>'+
                '</div>'
    $('.tourismShow .content').html(html);
    map = new AMap.Map('map', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [113.397428, 39.90923] //初始化地图中心点
    });
    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
    });
    var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
    });
    var marker = new AMap.Marker({
        icon:endIcon,
        position: new AMap.LngLat(113.397428, 39.90923),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
    });
    map.add(marker); 
    $('.tourismShow').show();
    $('.tourismShow').css('opacity',1)
})
function searchWay() {
    map.clearMap();
    var startPath = $("#startPath").val();
    var endPath = '北京';

    if (!startPath) {
        $("#startPath").focus();
        return;
    }
    $('.tourismShow .content').append('<div class="loadDiv"><img src="../static/imgs/timg.gif" /></div>')
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        // panel: "panel"
    });
    // 根据起终点名称规划驾车导航路线
    driving.search([
        { keyword: startPath, city: '' },
        { keyword: endPath, city: '' }
    ], function (status, result) {
        if (status === 'complete') {
            // log.success('绘制驾车路线完成');
            $('.loadDiv').remove();
        } else {
            alert('获取驾车数据失败：' + result)
            $('.loadDiv').remove();
        }
    });
}