本文通过一个例子讲述了jQuery焦点图轮播的特效代码。分享给大家参考。具体如下：jQuery cxSlide实现的三个多功能大气聚焦图轮播特效源码是一个具有三种不同风格和效果的聚焦图轮播代码，其中最有意思的有两个，一个是当聚焦图图片分成四块时，每张图片连接到不同的地址，另一个图片在鼠标悬停在内图时变暗，另一个是具有缩略图和文字描述效果的聚焦图轮播代码。运行渲染：

- .

提示：如果浏览器工作不正常，可以尝试切换浏览模式。为大家分享的jQuery焦点图轮播特效代码如下

！DOCTYPE HTMl HTMl ToolHeeta charset=' utf-8 '标题多功能大气jQuery焦点图轮播特效插件jQuery cxSlide/titlelink rel='样式表href='css/demo.css'link rel='样式表href=' CSS/layout。CSS '/headdydiv class=' wrap ' div class=' side ' dl class=' about ' DTjquery焦点图轮播/dt/dl/div class=' main ' div class=' in wrap ' h1jQuery焦点图轮换插件jQuery cxSlide/h1 h2示例/h2 div class='示例h3常见焦点图展示/H3 div id=' cxslide _ x ' class=' cxslide _ x ' div class=' box ' ul class=' list ' lia href=' # 1 ' img src=' http : img/slide _ 1。jpg '宽=' 600 '高=' 280 '/AP焦点图说明文字111/p/Li lia href=' # 2 ' img src=' http : img/slide _ 2。jpg '宽=' 600 '高=' 280 '/AP焦点图说明文字222/p/Li lia href=' # 3 ' img src=' http : img/slide _ 3。jpg '宽=' 600 '高=' 280 '/AP焦点图说明文字333/p/Li lia href=' # 4 ' img src=' http : img/slide _ 4。jpg '宽=' 600 '高=' 280 '/AP焦点图说明文字444/p/Li lia href=' # 5 ' img src=' http : img/slide _ 5。jpg '宽=' 600 '高=' 280 '/AP焦点图说明文字555/p/li /ul /div /div /div类='示例h3大模块展示/H3 div id=' cxslide _ y ' class=' cxslide _ y ' div class=' box ' ul class=' list ' lia href=' # ' img src=' http : img/y1。jpg ' width=' 780 ' height=' 420 '/a/Li div style=' float 3360 left；宽度width :560 pxa href=' # ' img src=' http : img/y2-1。jpg ' width=' 560 ' height=' 420 '/a/div div style=' float : left；宽度width :220 pxa href=' # ' img src=' http : img/y2-2。jpg ' width=' 220 ' height=' 140 '/a a href=' # ' img src=' http : img/y2-3。jpg ' width=' 220 ' height=' 140 '/a href=' # ' img src=' http 3360 img/y2-4。jpg ' width=' 220 '宽度width :520 pxa href=' # ' img src=' http : img/y3-1。jpg ' width=' 260 ' height=' 210 '/aa href=' # ' img src=' http : img/y3-2。jpg ' width=' 260 ' height=' 210 '/a href=' # ' img src=' http : img/y3。jpg ' width=' 5220 '宽度width :260 pxa href=' # ' img src=' http : img/y3-4。jpg ' width=' 260 ' height=' 420 '/a/div/Li Li div style=' float : left；宽度width :560 pxa href=' # ' img src=' http : img/y4-1。jpg ' width=' 560 ' height=' 420 '/a/div div style=' float : left；宽度width :220 pxa href=' # ' img src=' http : img/y4-2。jpg ' width=' 220 ' height=' 140 '/a a href=' # ' img src=' http : img/y4-3。jpg ' width=' 220 ' height=' 140 '/a href=' # ' img src=' http 3360 img/y4-4。jpg ' width=' 220 '自定义按钮内容/H3 div id=' cxslide _ fade ' class=' cxslide _ fade ' div class=' box ' ul class=' list ' lia href=' # ' img src=' http : img/fade 1。H4玩转早春自驾游/h4 p春暖花开，万物复苏；/p p到处洋溢着花香的气息；/p p连上七天班的心蠢蠢欲动；/p p不如趁着清明小长假，来次放松心情的自驾游吧！/p/div/a/Li lia href=' # ' img src=' http : img/fade 2。jpg ' div class=' txt ' H4风格=' color : # 9e 6452'十二星座屌丝男把妹秘籍/H4 p style=' color : # 9e 6452；'窈窕淑女，屌丝好逑/p p style=' color : # 9e 6452；'那么多美好的妹子，为什么一个都不是你的？/p p style=' color : # 9e 6452；'全速武装起来，妹子和机会一样，都喜欢有准备的人。

/p p style=' color : # 9e 6452；'十二星座单身男人，给福利！/H4 p/div/a/lilia href=' # ' img src=' http : img/fade 3 . jpg ' div class=' txt ' H4风和日丽/h4pIt清澈美丽，一切都显而易见。春意浓/p p包括祭奠和祭奠扫墓/p p还有欢笑和嬉闹踏青/p p，明天天气好，天晴就好~/p/div/a/lilia href=' # ' img src=' http 3360 img/fade 4 . jpg ' div class=' txt ' H4 style=' color 3360 #。愚人节玩具大战/H4 P Style=' Color : # 33333；每年愚人节都是搞笑玩具层出不穷的时候。/p p style=' color : # 33333；今年有哪些意想不到的事情？/p p style=' color : # 333333；边肖为你收集了今年的热门搞笑玩具。/p p style=' color : # 33333；选择一些愚人节当天的样片，和朋友们一起欣赏吧~/p/div/a/lilia href=' # ' img src=' http : img/fade 5 . jpg ' div class=' txt ' H4 style=' color 3360 # 8d 5930；家里很棒的装扮/H4 p style=' color : # 8d 5930；春天已经到来/p p style=' color : # 8d 5930；绿草破土，鲜花争奇/p p style=' color : # 8d 5930；大自然处处换上春装/p p style=' color : # 8d 5930；是不是该在家换衣服了！/p/div/a/Li lia href=' # ' img src=' http : img/fade 6 . jpg ' div class=' txt ' H4 style=' color : # 0c 6796；正是赏花的好时机/H4 p style=' color : # 0c 6796；天气越来越暖和，花儿开了/p p style=' color : # 0c 6796；或优雅、娇艳、华丽、自成一体/p p style=' color : # 0c 6796；春风温暖芬芳，让游客沉醉/p p style=' color : # 0c 6796；烟花三月下江南，正是赏花好时节。/p/div/a/Li/ul/div ul class=' clear fix ' href=' # ' img src=' http : img/fade 1 . jpg ' width=' 150 ' height=' 42 ' H4玩早春公路旅行/h4 /a pby a href='# 不二周助/a/p /li阿利fade 4 . jpg ' width=' 150 ' height=' 42 ' h 4愚人节Toy Battle/H4/a pby a href=' # '不二周助/a/p/li阿利href=' #' img src=' http 3360 img/fade 5 . jpg ' width=' 150 ' height=' 42 ' H4 home梳妆/H4/a pby a href=' # ' Cherry Maruko/a/p/Li阿利href=' # ' img src=' cxSlide({ plus: true，MINUS : true })；$('#cxslide_y ')。cxSlide({ type : ' y ' })；$('#cxslide_fade ')。cxSlide({ events: 'mouseover '，type: 'fade '，speed : 300 })；/script/body/html更多精彩内容，也可以参考《jQuery焦点图特效汇总》学习，希望大家喜欢。

以上是为大家分享的jQuery焦点图轮播特效代码。希望大家都能喜欢。