zoukankan      html  css  js  c++  java
  • js 手动轮播和自动轮播

    $(function(){
    //默认值
    $("#carousel1").css("background-color","#FFF"); //第一张图的背景
    if(typeof(title_arr) == 'undefined'){
    return;
    }

    $(".car_c_title p").html(title_arr[0]); //第一张图的标题
    //以下数组中的颜色与主图两边颜色同步的背景色(不同用户用脑分辨率不同导致图片无法铺满时,通过背景色的补充,起到铺满的作用)
    var rgb_arr = new Array("#FFF","#FFF","#FFF","#FFF","#FFF","#FFF");
    //所有标题
    //自动轮播方法
    function roll(rgb_arr,title_arr){
    setTimeout(function(){
    for(var i=0;i<=5;i++){
    var nowpic = $("#carousel1 .car_bigp a").eq(i);
    if(nowpic.css("display") == "block"){
    var showpicnum = i*1+1*1;
    $("#carousel1 .car_bigp a").css("display","none"); //先隐藏所有主图
    $(".car_c_smallpic img").css("border",""); //先隐藏所有小图边框
    if(showpicnum == 6){
    //最后一张时,跳转到第一张
    $("#carousel1 .car_bigp a").eq(0).css("display","block");
    $("#carousel1").css("background-color",rgb_arr[0]);
    $("#carousel1").attr("name",0);
    $(".car_c_smallpic img").eq(0).css("border","solid 2px #A52923");
    $(".car_c_title p").html(title_arr[0]);
    }else{
    $("#carousel1 .car_bigp a").eq(showpicnum).css("display","block"); //主图
    $("#carousel1").css("background-color",rgb_arr[showpicnum]); //主图背景
    $("#carousel1").attr("name",showpicnum); //给div一个name值,代表当前自动轮到到哪张图,鼠标轮播时会用到这个值
    $(".car_c_smallpic img").eq(showpicnum).css("border","solid 2px #A52923"); //小图边框
    $(".car_c_title p").html(title_arr[showpicnum]); //标题
    }
    break;
    }
    }
    roll(rgb_arr,title_arr);
    },6000);
    }
    roll(rgb_arr,title_arr);
    //点击左箭头
    $(".car_c_inpt1").click(function(){
    var showpicnum = $("#carousel1").attr("name"); //当前选中的图片eq编号
    if(showpicnum <= 0){
    var eqnum = 5;
    }else{
    var eqnum = showpicnum-1;
    }
    mouseRoll(rgb_arr,title_arr,eqnum);

    });
    //点击右箭头
    $(".car_c_inpt2").click(function(){
    var showpicnum = $("#carousel1").attr("name"); //当前选中的图片eq编号
    if(showpicnum >= 5){
    var eqnum = 0;
    }else{
    var eqnum = showpicnum*1+1*1;
    }
    mouseRoll(rgb_arr,title_arr,eqnum);
    });
    //鼠标滑过小图
    $(".car_c_smallpic img").mouseover(function(){
    var eqnum = $(this).index()-1;
    mouseRoll(rgb_arr,title_arr,eqnum);
    });
    //鼠标事件轮播方法
    function mouseRoll(rgb_arr,title_arr,eqnum){
    $(".car_c_smallpic img").css("border",""); //隐藏所有小图边框
    $(".car_c_smallpic img").eq(eqnum).css("border","solid 2px #A52923"); //显示当前选中的小图边框
    $("#carousel1 .car_bigp a").css("display","none"); //隐藏所有主图
    $("#carousel1 .car_bigp a").eq(eqnum).css("display","block"); //显示当前选中的主图
    $("#carousel1").css("background-color",rgb_arr[eqnum]); //显示当前选中的主图背景
    $(".car_c_title p").html(title_arr[eqnum]); //标题
    $("#carousel1").attr("name",eqnum); //最新的name值
    }



    })
  • 相关阅读:
    全排列(求所有情况的个数)--10--全排列--蓝桥杯凑算式和leetcode46全排列
    DFS+BFS(广度优先搜索弥补深度优先搜索遍历漏洞求合格条件总数)--09--DFS+BFS--蓝桥杯剪邮票
    Powermock2.0.0 详细 总结
    Springboot 前后端数据传输 常见误区
    idea src下源文件和class编译文件不一致
    java对象clone
    数据结构-链表
    队列
    稀疏数组
    数据库隔离级别
  • 原文地址:https://www.cnblogs.com/xxp0921/p/5629012.html
Copyright © 2011-2022 走看看