jQuery 垂直轮播图切换特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 36 13



特效描述:垂直轮播图切换。jQuery垂直轮播图切换带缩略图。

代码结构

1. 引入CSS

<link type="text/css" href="css/jq22.css" rel="stylesheet" />
<link type="text/css" href="css/jq22.css" rel="stylesheet" />

2. 引入JS

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jq22.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jq22.js"></script>

3. HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="padding-top:10px;">
<div id="zSlider">
  <div id="picshow">
    <div id="picshow_img">
      <ul>
        <li><a href="#"><img src="images/a1.png"></a></li>
        <li><a href="#"><img src="images/a2.png"></a></li>
        <li><a href="#"><img src="images/a3.png"></a></li>
        <li><a href="#"><img src="images/a4.png"></a></li>
        <li><a href="#"><img src="images/a5.png"></a></li>
        <li><a href="#"><img src="images/a6.png"></a></li>
      </ul>
    </div>
    <div id="picshow_tx">
      <ul>
        <li>
          <h3><a href="#">垂直轮播插件标题信息内容1</a></h3>
          <p>上海第一家死飞精品店,由三个外国人与一中国人联合创办,主要经营客订个性单速车,帮助他们得到自己梦想中的车架。</p>
        </li>
        <li>
          <h3><a href="#">垂直轮播插件标题信息内容2</a></h3>
          <p>冰岛有“火山岛”、“雾岛”、“冰封的土地”、“冰与火之岛”之称。有想过在这里骑游吗?下面看看Ovegur的冰岛骑游之旅吧。</p>
        </li>
        <li>
          <h3><a href="#">垂直轮播插件标题信息内容3</a></h3>
          <p>这几天,全国各地的空气糟糕透顶!北京空气污染指数又爆表了!!!经过资深车友的推荐及亲身体验,整理出几款超强防毒的骑行口罩。</p>
        </li>
        <li>
          <h3><a href="#">垂直轮播插件标题信息内容4</a></h3>
          <p>近年来户外骑行等运动录像盛行,Gopro这品牌可说功不可没,新版的Gopro Hero3具有1200万像素带Wi-Fi功能……</p>
        </li>
        <li>
          <h3><a href="#">垂直轮播插件标题信息内容5</a></h3>
          <p>“我要从南骑到北,我还要从白骑到黑。我要人们都看到我,却不知道我是谁。爱上我你就不要后悔,总有一天我要远走高飞。”</p>
        </li>
        <li>
          <h3><a href="#">垂直轮播插件标题信息内容6</a></h3>
          <p>外出骑行,不会总有一个修车老大爷在你扎胎后的不远处等着你,本期课堂教会你如何撬胎补胎,再碰上爆胎,你就可以淡定了。</p>
        </li>
      </ul>
    </div>
  </div>
  <div id="select_btn">
    <ul>
      <li><a href="#"><img src="images/a1.png"><span class="select_text">垂直轮播插件标题信息内容1</span><span class="select_date">2019/01/16</span></a></li>
      <li><a href="#"><img src="images/a2.png"><span class="select_text">垂直轮播插件标题信息内容2</span><span class="select_date">2019/01/15</span></a></li>
      <li><a href="#"><img src="images/a3.png"><span class="select_text">垂直轮播插件标题信息内容3</span><span class="select_date">2019/01/13</span></a></li>
      <li><a href="#"><img src="images/a4.png"><span class="select_text">垂直轮播插件标题信息内容4</span><span class="select_date">2019/01/08</span></a></li>
      <li><a href="#"><img src="images/a5.png"><span class="select_text">垂直轮播插件标题信息内容5</span><span class="select_date">2019/12/28</span></a></li>
      <li><a href="#"><img src="images/a6.png"><span class="select_text">垂直轮播插件标题信息内容6</span><span class="select_date">2019/12/26</span></a></li>
    </ul>
  </div>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到