注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

新闻焦点图片切换jQuery选项卡

媒体 fishcity 1251浏览

jquery新闻焦点图

一款很多门户都在使用的jquery特效,这款新闻焦点图虽说不上高端大气上档次,但也算是简洁美观大方实用了。特效分为两个区域,一个是大图区域,一个标题区域,大图区可选择显示或是不显示标题,而标题或还可以有14个汉字的长度来写简介,让您的新闻更明了直观。

jquery实例:新闻焦点图使用方法

首先引入须必的jquery库(可以是本地的也可以是cdn的,看需求),另外一个是slider插件,当然样式表也是必须的。

<link href="css/zzsc.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/slider.js" type="text/javascript"></script>

接下就是建立html标签了,这里的代码有些多,但是很有条理,仔细看,很容易就看明白了。

<div  class="slider-scroll f-c">  
    <div id="showArea">
	<a href="http://www.jqcool.net/"  title="斜弱视专家援疆" target="_blank"><img style="display:block; opacity:1;" src="images/20140108065158301.jpg"  width="664px" height="419px" alt="斜弱视专家援疆"/></a>
	<a href="http://www.jqcool.net/"  title="IntraLase飞秒激光治近视" target="_blank"><img style="display:block; opacity:1;" src="images/20131209053030521.jpg"  width="664px" height="419px" alt="IntraLase飞秒激光治近视"/></a>
	<a href="http://www.jqcool.net/"  title="青少年近视防控" target="_blank"><img style="display:block; opacity:1;" src="images/20130911041617875.jpg"  width="664px" height="419px" alt="青少年近视防控"/></a>
	<a href="http://www.jqcool.net/"  title="白内障防治" target="_blank"><img style="display:block; opacity:1;" src="images/20130927093022595.jpg"  width="664px" height="419px" alt="白内障防治"/></a>
	<a href="http://www.jqcool.net/"  title="ICL人工晶体植入术" target="_blank"><img style="display:block; opacity:1;" src="images/20130911041703809.jpg"  width="664px" height="419px" alt="ICL人工晶体植入术"/></a>
    </div>
    <div id="scrollDiv">  
	<ul>
	    <li class="on"><a href="http://www.jqcool.net/" target="_blank">斜弱视专家援疆<!--12个字以内--><span>权威治疗疑难斜弱视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>  
	    <li ><a href="http://www.jqcool.net/" target="_blank">IntraLase飞秒激光治近视<!--12个字以内--><span>全程无刀安全治近视首选<!--14个字以内--></span></a><span class="entity-triangle"></span></li>  
	    <li ><a href="http://www.jqcool.net/" target="_blank">青少年近视防控<!--12个字以内--><span>非手术治近视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>  
	    <li ><a href="http://www.jqcool.net/" target="_blank">白内障防治<!--12个字以内--><span>爱让父母看得见<!--14个字以内--></span></a><span class="entity-triangle"></span></li>  
	    <li ><a href="http://www.jqcool.net/" target="_blank">ICL人工晶体植入术<!--12个字以内--><span>无损角膜之高端近视治疗<!--14个字以内--></span></a><span class="entity-triangle"></span></li>  
	</ul> 
    </div> 
</div>

showArea为大图显示区域,scrollDiv为标题区域,通过标题可以随心的切换想看的内容,标题也可以自动的切换。

完成以上工作,紧接的就是建立JS,调用插件了,这里只需要8行代码就可以调了,简单快速吧。

$(document).ready(function(){  
$.manualScroll({  
    objId:"scrollDiv",  // 滚动区域id  
    showArea:"showArea", //大图显示区域id,如果没有就不显示  
    showWidth:664, // 大图宽度  
    showHeight:419, // 大图高度  
    showTitle: true,  // 是否在大图下方显示标题  
    interval:3000    //滚动间隔时间
    });  
});

代码上都作了注释,用起来就更加的方便了,呵可,动手试试吧,加到自己的网站也不错哦。

转载请注明:jQ酷 » 新闻焦点图片切换jQuery选项卡

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。