咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

jquery实现多模块切换轮播

说两句废话：对于一个小白痴来说，get这些知识真的是有点费劲，我还没学jquery，看了这对应的公开课后，自己敲了一天才整理好，希望总结后更上一层楼。

创新互联建站主营彭阳网站建设的网络公司,主营网站建设方案,app软件开发公司,彭阳h5微信小程序搭建,彭阳网站营销推广欢迎彭阳等地区企业咨询

资料下载地址：
链接：https://pan.baidu.com/s/1HvfJrGowK4gjQGE17nFHOw 密码：rw8a

为了以防万一，下边有所有 的资料，可自行选择下载。

最后要完成的效果图：
jquery实现多模块切换轮播

效果图说明：

  • 左边的框框会一个一个的往后走，第一个（南京）有一个默认的深红色的背景。
  • 可以随意的点击框框
  • 右边的图片和左边的框框是对应的，框框动，相应的图片也会展示出来
  • 点击右边的左箭头和右箭头图片进行相应的切换，左边的框框也跟着动

注：写jquery首先引入包

宏观分析：

  1. 先搞定左边的自动轮播，用到计时器 setInterval(函数名，时间)（get新知识）
  2. 随机点击左边的图片，右侧显示左侧点击的模块
  3. 点击右边的按钮，左侧显示右侧点击的模块

详细分析：
右侧的图片是怎样动的？为什么每次显示一张图片，其他的哪去了？
其实用的隐藏功能！css里边有个overflow：hidden
图片是这样动的：
jquery实现多模块切换轮播
宽度没画好，简单说一下：
右边显示图片的框框是不动的，动的是来回轮播的图片。

  1. 我们给第一张图片设置默认索引为 0 ，运动时间为3秒（3000毫秒，程序里用的是毫秒），即3秒后索引 +1 ，这样就显示下一张图片了。
    显示下一张图片还需要做一些处理：
    运动的小框框要加载索引的样式，其他的同级的都去掉索引样式。
    animate（get新技能），可以让图片动起来，我们设置的是向左移动，可以自行设置向右移动，移动多少才合适呢？当然是图片的宽度，也就是当前索引*图片的宽度（我们的图片是固定宽度的）
    另外：因为索引是++的，加到索引最大值后呢？我们可以做个判断，当超出索引长度的时候，索引在从 0 开始
function showCur() {
        //移动到当前的块上，加上list_cutL索引，同级的去掉list_cutLi索引
        $(".list-left ul li").eq(curItem).addClass("list_cutLi").siblings("li").removeClass("list_cutLi");
        //一张图片宽268，*索引就是移动的宽度
        var leftVal = 268 * curItem;
        //$(".right-box-main").css('left', -leftVal);
        //0.5秒内向左移动图片
        $(".right-box-main").animate({ left: -leftVal }, 500);
    };
var curItem = 0;/*索引*/
    var len = $(".list-left ul li").length;  //索引的长度  12
    function autoPlay() {
        curItem++;
        if (curItem > len-1) {
            curItem = 0;
        };
        /**
        eq获取索引，从第一个开始
        siblings获取同辈元素
        */
        showCur();
    };
    setInterval(autoPlay, 3000);

2.那么剩下 的就简单多了
解决点击左边的框框，右边 的图片也会跳到点击的图片

获取点击的当前图片的索引值，然后调用showCur方法即可
index()，get新技能，获取当前索引值和参数

$(".list-left ul li").click(function () {
        curItem = $(this).index();
        showCur();
    });

3.解决最后一个问题
点击右边的按钮，左边加载相应的模块

点击左按钮：索引要 -1，加判断条件；
点击右按钮：索引要 +1，加判断条件。

$(".list-right .left-btn").click(function () {
        curItem--;
        if (curItem < 0) {
            curItem = len - 1;
        }
        showCur();
    });
    //右按钮
    $(".list-right .right-btn").click(function () {
        curItem++;
        if (curItem > len - 1) {
            curItem = 0;
        }
        showCur();
    });

大功告成，下边是最重要的部分，源码和图片

index.html





    jquery多模块切换轮播
    
    
    



    

        

            
多区块点击切换

            

                
    
                    
  • 南京
    • 
                    
  • 上海
    • 
                    
  • 武汉
    • 
                    
  • 西安
    • 
                    
  • 长春
    • 
                    
  • 大连
    • 
                    
  • 成都
    • 
                    
  • 杭州
    • 
                    
  • 沈阳
    • 
                    
  • 合肥
    • 
                    
  • 长沙
    • 
                    
  • 郑州
    •

css/style.css


body{
    line-height:150%;margin:0;padding:0;
}

h2,h3,h4,h5,h6,h7,dl,dt,dd,ul,li,p,span,i,em{margin:0;padding:0;font-style:normal;}
h2,h3,h4,h5,h6,h7{font-size:14px;}
dl,dt,dd,ul,li{list-style-type:none;display:block;}

a{
    color:#000;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}

.box{
    clear:both;
    margin:0 auto; 
}
.city-lists{
    width:916px;
    height:408px;
    background:#E7E2DF;
    margin:0 auto;
    position:relative;
}

.list-title{
    font: 18px/45px "微软雅黑";
    color: rgb(255, 255, 255);
    width:610px;
    height:45px;
    top:-1px;
    left:-1px;
    padding: 0px 14px 14px;
    z-index:100;
    background:url(../image/bd_bg1.jpg) no-repeat;
    position:absolute;/*absolute如果最近的父元素没有定义，则相对于html绝对定位，好处是可以释放位置，所以下边的list-left可以沾满整个高度*/
}
.list-left{
    height: 344px; 
    width: 552px; 
    float:left;
    background:#F9F1E6;
    position:absolute;
    padding-top:64px;
    padding-left:25px;
}

.list-left ul li{
    color:#fff;
    height: 107px; 
    width: 130px;
    font:18px/107px "温软雅黑";
    float:left;
    text-align:center;
    background: #707070;
    margin:0px 3px 3px 0px; 
    cursor:pointer;/*鼠标移动上去出现小手*/
}

/*设置第一个li默认显示的颜色*/
.list-left ul .list_cutLi{
    background:#6B0904;
}

.list-right{
    width:336px;
    float:right;
}
.list-right-t{
    width:333px;
}
.left-btn{
    padding:0px 0px 0px 5px;
    width:23px;
    height:21px;
    float:left;
    margin-top:145px;
    cursor:pointer;
    display:block;
    background:url(../image/bd_lbtn.jpg) no-repeat;
}
.right-btn{
    padding:0px 0px 0px 5px;
    width:23px;
    height:21px;
    float:right;
    margin-top:145px;
    cursor:pointer;
    display:block;
    background:url(../image/bd_rbtn.jpg) no-repeat;
}
.left-btn:hover{
    background:url(../image/hbd_lbtn.jpg) no-repeat;
}
.right-btn:hover{
    background:url(../image/hbd_rbtn.jpg) no-repeat;
}
.right-box{
    float:left;
    width:268px;
    height:333px;
    overflow:hidden;
    position:relative;/*right-main的absolute的父级*/
}
.right-box-main{
    width:3216px;/*12张图片的宽度*/
    height:333px;
    position:absolute;
    top:10px;
    left:0;
}
.right-box-main ul li{
    height:333px;
    width:268px;
    float:left;
    font-family:"温软雅黑";
}

.right-box-main img{
    width:268px;
    height:173px;
}
.bc_chgTitle{
    height:54px;
    width:268px;
    text-align:center;
    line-height:54px;
    font: bold 16px/54px "微软雅黑";
}
.right-box-main ul li p{
    font-size:14px;
    width:268px;
    line-height:25px;
    padding-top:15px;
}

js/demo.js

$(function () {
    //1.自动轮播 定时器 setInterval(函数名，时间)

    /**
        autoPlay方法，实现自己动：
        开始的时候，设置第一张图片的索引默认为 0，动一下索引 + 1 ，
        如果动到最后一张的时候在动就默认在为 0 (索引大于索引最大值时默认回到最小)
    */
    var curItem = 0;/*索引*/
    var len = $(".list-left ul li").length;  //索引的长度  12
    function autoPlay() {
        curItem++;
        if (curItem > len-1) {
            curItem = 0;
        };
        /**
        eq获取索引，从第一个开始
        siblings获取同辈元素
        */
        showCur();
    };
    setInterval(autoPlay, 3000);

    //2.左侧点击模块，右侧跳转到相应的图片
    /**
        获取当前点击的图片的索引
        index()->搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。

    */
    $(".list-left ul li").click(function () {
        curItem = $(this).index();
        showCur();
    });
    //3.右侧点击图片，左侧跳转到相应的模块
    //左按钮
    $(".list-right .left-btn").click(function () {
        curItem--;
        if (curItem < 0) {
            curItem = len - 1;
        }
        showCur();
    });
    //右按钮
    $(".list-right .right-btn").click(function () {
        curItem++;
        if (curItem > len - 1) {
            curItem = 0;
        }
        showCur();
    });
    //公共方法
    function showCur() {
        //移动到当前的块上，加上list_cutL索引，同级的去掉list_cutLi索引
        $(".list-left ul li").eq(curItem).addClass("list_cutLi").siblings("li").removeClass("list_cutLi");
        //一张图片宽268，*索引就是移动的宽度
        var leftVal = 268 * curItem;
        //$(".right-box-main").css('left', -leftVal);
        //0.5秒内向左移动图片
        $(".right-box-main").animate({ left: -leftVal }, 500);
    };
})

jquery实现多模块切换轮播
jquery实现多模块切换轮播
jquery实现多模块切换轮播
jquery实现多模块切换轮播
jquery实现多模块切换轮播
jquery实现多模块切换轮播jquery实现多模块切换轮播jquery实现多模块切换轮播jquery实现多模块切换轮播jquery实现多模块切换轮播jquery实现多模块切换轮播jquery实现多模块切换轮播


网站名称：jquery实现多模块切换轮播
文章出自：http://cqcxhl.cn/article/pdjijd.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP