zoukankan      html  css  js  c++  java
  • jQuery实现选项联动轮播

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <link rel="stylesheet" href="css/baner.css">
      <script src="js/jquery-1.11.3.js"></script>
      <script src="js/index.js"></script>
      <title>JQ轮播三级连锁</title>
     </head>
     <body>
        <div class="parent">
          <div class="top">
           <p>
                <a href="">创意空间</a>
                <a href="">永恒的爱</a>
                <a href="">浪漫真情</a>
                <a href="">珍贵独特</a>
           </p>
          </div>
          <div class="fours">
            <a href=""><img src="img/1.jpg" alt=""></a>
            <a href=""><img src="img/2.jpg" alt=""></a>
            <a href=""><img src="img/3.jpg" alt=""></a>
            <a href=""><img src="img/4.jpg" alt=""></a>
          </div>
        </div>
     </body>
    </html>

    CSS

    *{
        border:none;
        margin: 0;
        padding: 0;
        list-style: none;
        outline: none;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    /*方法二*/
    body{
        display: flex;
        align-items: center;/****水平居中****/
        justify-content: center;/*垂直居中*/
    }
    .parent{
        width: 750px;
        height: 400px;
        /*方法一*/
        /*margin: 0 auto;*/
        /*position: relative;*/
        /*top: 50%;*/
        /*margin-top: -200px;*/
    }
    /*轮播*/
    .top p{
        width: 90%;
        margin: 0 auto;
    }
    .top p a{
        display: inline-block;
        line-height: 30px;
        width: 23%;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
        border: 2px solid transparent;
        color: slategray;
    }
    .top p a.selected{
        border: 2px solid #e4393c;
        color: #e4393c;
    }
    /*图片*/
    .fours{
        width: 650px;
        margin: 0 auto;
        height: 300px;
        position: relative;
        margin-top: 30px;
    }
    .fours a{
        position: absolute;
    }

    JS

    定义变量和定时器,变量等价于eq(index)中index,自动轮播是可以的,关键在于,鼠标进入选项卡区域时候,怎么对应想要的轮播画面,

    方法:停止定时器,获取当前选项卡下标,匹配对应的轮播画面显示出来。

    var  a=0;
    var t=null;
    $(function(){
       $('.fours>a:not(:first-child)').hide();
       t=setInterval("autoMove()",2000);
       //鼠标进入轮播停止
       $('.parent').hover(function(){clearInterval(t)},function(){t=setInterval("autoMove()",2000);});
    // 当鼠标进去对应选项时候图片对应变化
       $(".top p>a").hover(function(){
          clearInterval(t);
          var num=$(this).index();
          showThis(num);
        //console.log(num);
       })
    });
    function autoMove(){
     a++;
     if(a>=4){
       a=0;
      }
     play(a);
    }
    function play(a){
       $('.fours>a').filter(":visible").fadeOut(500).parent().children().eq(a).fadeIn(1000);
       $('.top p a').eq(a).addClass("selected").siblings().removeClass("selected");
    }
    //鼠标进入的情况
    function showThis(sum){
       $(".fours>a").eq(sum).fadeIn(1000).siblings().fadeOut(500);
       $(".top p a").eq(sum).addClass("selected").siblings().removeClass("selected");
    }
  • 相关阅读:
    jquery实现页面的搜索功能
    url中的查询字符串的参数解析
    5.14日学习内容1:jquery表单相关知识
    5.12日北京“咖啡陪你”咖啡吧学习笔记
    layui基础上的tree菜单动态渲染;
    H5area的热区锚点随着图片的尺寸而变化
    Python3基础 raise 产生RuntimeError 异常
    Python3基础 raise + 指定类型异常+异常的解释 产生特定类型异常
    Python3基础 判断变量大于一个数并且小于另外一个数
    Python3基础 内嵌函数 简单示例
  • 原文地址:https://www.cnblogs.com/-walker/p/5280008.html
Copyright © 2011-2022 走看看