jquery多图切换带文字内容|三体教程
文章目录

jquery多图切换带文字内容

今天分享的这个jquery多图切换实例,是小编很久以前做的。

记得当时是看到鸿鹄逸游这个网站上面有这样的酷炫样式,所以就参照做了一个。

多个图片,每个图片有对应的内容。

点击一个图片,就会弹出对应的内容。

而其他的图片则随之关闭。

jquery多图切换带文字内容

css代码.rank{height:315px;margin-top:10px;font-size:14px;line-height:20px;color:#4f4f4f;}
.rank li{width:100%;}
.rank a{color:#434343; text-decoration:none;}
.rank h3{margin:0; padding:0;}
.rankList{float:left;background:#eeeeee;width:142px;overflow:hidden;height:315px;margin-right:1px;}
.rankBox{width:428px;height:315px;}
.rankImg{float:left;width:142px;height:315px;position:relative;}
.rankImg img{position:absolute;top:0;left:0;z-index:0;}
.rankImg span{display:block;background:#e3b145;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;width:142px;height:50px;position:absolute;bottom:0;left:0;z-index:2;}
.rankImg p{position:absolute;bottom:0;left:0;z-index:10;width:142px;height:50px;line-height:80px;text-align:center;color:#FFF;font-size:16px;}
.rankInfo{float:left;padding:10px 16px;width:250px;}
.rankBox h3{font-size:18px;line-height:26px;border-bottom:1px dashed #bfbfbf;padding:6px 0;font-weight:normal;}
.rankBox h3 span{font-size:24px;text-transform:uppercase;color:#eead22;}
.rankBox ul{width:100%;border-top:1px dashed #ffffff;margin:0;float: left;margin: 0px;padding: 0px; list-style: none;}
.rankBox ul li{padding:10px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:100%; margin-left:0;}
.rankBox ul li span{color:#eead22;font-family:Arial;font-size:14px;margin-right:3px;}
.rankBox ul li a:hover{color:#eead22;text-decoration:underline;}
javascript代码$(function () {
	$(".rankList .rankImg").css({ cursor: "pointer" }).click(function () {
		var $cur = $(".rank").find(".rankList[status='cur']");
		var $this = $(this).parent().parent();
		if ($this.attr("status") == $cur.attr("status"))
			return;
		$(".rank .rankList").removeAttr("status");
		$cur.animate({ width: 142 }, 200, function () {
			$this.attr("status", "cur").animate({ width: 428 }, 100, function () {
			});
		});
	});
});
html代码<div class="rank">
  <div status="cur" class="rankList" style="width: 428px;">
    <div class="rankBox">
      <div style="cursor: pointer;" class="rankImg"> <img src="20170901073821751.jpg" height="315" width="142" alt="马尔代夫旅游奢华度排名"> <span></span>
        <p> 奢华度排名</p>
      </div>
      <div class="rankInfo">
        <h3> <span>top5</span><br>
          奢华度排名</h3>
        <ul>
          <li><span>1</span><a href="#" title="白马庄园Cheval Blanc Randheli">白马庄园Cheval Blanc Randheli</a></li>
          <li><span>2</span><a href="#" title="蕉叶岛Vakarufalhi">蕉叶岛Vakarufalhi</a></li>
          <li><span>3</span><a href="#" title="卓美亚德瓦娜芙希Jumeirah Dhevanafushi Maldives">卓美亚德瓦娜芙希Jumeirah Dhevanafushi Maldives</a></li>
          <li><span>4</span><a href="#" title="宁静岛W Retreat &amp; Spa Maldives">宁静岛W Retreat &amp; Spa Maldives</a></li>
          <li><span>5</span><a href="#" title="芙花芬岛Huvafen Fushi Spa Resort Maldives">芙花芬岛Huvafen Fushi Spa Resort Maldives</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="rankList">
    <div class="rankBox">
      <div style="cursor: pointer;" class="rankImg"> <img src="20170901073821752.jpg" height="315" width="142" alt="马尔代夫旅游浮潜排名"> <span></span>
        <p> 浮潜排名</p>
      </div>
      <div class="rankInfo">
        <h3> <span>top5</span><br>
          浮潜排名</h3>
        <ul>
          <li><span>1</span><a href="#" title="菲利兹优岛Filitheyo Island">菲利兹优岛Filitheyo Island</a></li>
          <li><span>2</span><a href="#" title="丽世岛LUX">丽世岛LUX</a></li>
          <li><span>3</span><a href="#" title="瓦度岛Adaaran Prestige Vadoo Island Resort">瓦度岛Adaaran Prestige Vadoo Island Resort</a></li>
          <li><span>4</span><a href="#" title="莉莉岛Lily Beach Resort">莉莉岛Lily Beach Resort</a></li>
          <li><span>5</span><a href="#" title="伊瑚鲁悦椿度假村Angsana Ihuru">伊瑚鲁悦椿度假村Angsana Ihuru</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="rankList">
    <div class="rankBox">
      <div style="cursor: pointer;" class="rankImg"> <img src="20170901073821753.jpg" height="315" width="142" alt="马尔代夫旅游性价比排名"> <span></span>
        <p> 性价比排名</p>
      </div>
      <div class="rankInfo">
        <h3> <span>top5</span><br>
          性价比排名</h3>
        <ul>
          <li><span>1</span><a href="#" title="波杜希蒂Coco Palm Bodu Hithi">波杜希蒂Coco Palm Bodu Hithi</a></li>
          <li><span>2</span><a href="#" title="卡努呼拉岛Kanuhura Maldives">卡努呼拉岛Kanuhura Maldives</a></li>
          <li><span>3</span><a href="#" title="瑞僖敦The Residence">瑞僖敦The Residence</a></li>
          <li><span>4</span><a href="#" title="阿雅达岛Ayada Maldives">阿雅达岛Ayada Maldives</a></li>
          <li><span>5</span><a href="#" title="鲁滨逊岛Robinson Club Maldives">鲁滨逊岛Robinson Club Maldives</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="rankList">
    <div class="rankBox">
      <div style="cursor: pointer;" class="rankImg"> <img src="20170901073821754.jpg" height="315" width="142" alt="马尔代夫旅游销售量排名"> <span></span>
        <p> 销售量排名</p>
      </div>
      <div class="rankInfo">
        <h3> <span>top5</span><br>
          销售量排名 </h3>
        <ul>
          <li><span>1</span><a href="#" title="波杜希蒂Coco Palm Bodu Hithi">波杜希蒂Coco Palm Bodu Hithi</a></li>
          <li><span>2</span><a href="#" title="鲁滨逊岛Robinson Club Maldives">鲁滨逊岛Robinson Club Maldives</a></li>
          <li><span>3</span><a href="#" title="阿雅达岛Ayada Maldives">阿雅达岛Ayada Maldives</a></li>
          <li><span>4</span><a href="#" title="喜来登-满月岛Sheraton Maldives-Full Moon">喜来登-满月岛Sheraton Maldives-Full Moon</a></li>
          <li><span>5</span><a href="#" title="泰姬珍品岛Taj Exotica resort">泰姬珍品岛Taj Exotica resort</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="rankList" style="margin-right: 0;">
    <div class="rankBox">
      <div style="cursor: pointer;" class="rankImg"> <img src="20170901073821755.jpg" height="315" width="142" alt="马尔代夫旅游最贵岛屿排名"> <span></span>
        <p> 最昂贵排名</p>
      </div>
      <div class="rankInfo">
        <h3> <span>top5</span><br>
          最昂贵排名</h3>
        <ul>
          <li><span>1</span><a href="#" title="白马庄园Cheval Blanc Randheli">白马庄园Cheval Blanc Randheli</a></li>
          <li><span>2</span><a href="#" title="维塔维丽酒店Jumeirah Vittaveli Resort">维塔维丽酒店Jumeirah Vittaveli Resort</a></li>
          <li><span>3</span><a href="#" title="都喜天阙岛Dusit Thani">都喜天阙岛Dusit Thani</a></li>
          <li><span>4</span><a href="#" title="卓美亚德瓦娜芙希Jumeirah Dhevanafushi Maldives">卓美亚德瓦娜芙希Jumeirah Dhevanafushi Maldives</a></li>
          <li><span>5</span><a href="#" title="宁静岛W Retreat &amp; Spa Maldives">宁静岛W Retreat &amp; Spa Maldives</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

亲自测试一下

记住使用时要引用jquery文件,要不然无法运行。

本文网址:http://www.santii.com/article/25.html


数据更新时间:2018-07-23