如何进行jQuery内容滑动特效插件的应用-创新互联

如何进行jQuery内容滑动特效插件的应用，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联建站是一家集网站建设,兰陵企业网站建设,兰陵品牌网站建设,网站定制,兰陵网站建设报价,网络营销,网络优化,兰陵网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

大概在一个多月前，我写了一篇文章，大概介绍了jFlow内容滑动插件的应用，有朋友问我要求提供更多的样式参考。关于jFlow基本应用，大家可以参考前面我写的文章：jFlow：jQuery内容滑动特效插件的应用，本文是上篇文章的续集，主要介绍如何运用CSS样式来设计不同效果的滑动界面。

主要介绍如何运用CSS样式来设计不同效果的滑动界面。

介绍了三种效果的设计：

Demo 1：小圆点导航、自动切换

Demo 2：小圆点导航、方向按钮切换

Demo 3：个性化切换

经常上迅雷看看的网友，应该对Demo 2很眼熟，迅雷看看网站在展示影片的时候就用到了这种滑动效果，用来在有限的空间里展示更多的影片。Demo 1 和Demo 2就是从迅雷看看得到的启发，下面我们以Demo 2为例，讲解设计过程。

HTML

<p class="demo">   <p id="myController">      <span class="j_prev"> </span>      <span class="jFlowControl"> </span>      <span class="jFlowControl"> </span>      <span class="jFlowControl"> </span>      <span class="j_next"> </span>   </p>     <p id="slides">      <p class="slide_wrap">        <p class="pro">           <a href="#" target="_blank"><img src="images/pic1.jpg" alt="" /><br/> 东莞市基源科技开发有限公司</a>        </p>        <p class="pro">           <a href="#" target="_blank"><img src="images/pic2.jpg" alt="" /><br/> 深圳市玫瑰石科技有限公司</a>        </p>        <p class="pro">           <a href="#" target="_blank"><img src="images/pic3.jpg" alt="" /><br/> Angel mannequin</a>        </p>      </p>      ...   </p> </p>

说明：...表示重复的p.slide_wrap，有几条要滚动的内容就有几个slide_wrap。

HTML DIV结构示意图如下：

CSS

.demo{width:680px; height:138px; border:1px solid #acc6e9; background:#fff; margin:4px auto 20px auto; overflow:hidden} .pro{float:left; width:210px; height:132px; margin:10px 0 6px 10px; text-align:center} .pro img{width:200px; height:102px} .pro a:hover{text-decoration:none; color:#f60} #myController{height:42px; line-height:32px;  z-index:1005; position:absolute; margin-top:-30px; margin-left:540px} #myController span{ padding:3px 9px; text-align:center; cursor:pointer; background:url(images/arr_icon.gif) no-repeat} #myController span.j_prev{background-position:4px -81px} #myController span.j_next{background-position:4px -54px} #myController span.jFlowControl4{background-position:4px -2px} #myController span.jFlowSelected4 {background-position:4px -25px}

.demo是最外层DIV，包含整个滑动内容和导航控制条，设置它的宽度、高度、背景色和边框。

.pro是控制滚动内容的每一个小图片和图片标题的DIV，设置像左浮动，宽度、高度以及间距。

#myController是用来设置导航样式的，设置绝对位置position:absolute，z-index值。给里面的span标签设置一个背景图片arr_icon.gif，这张背景图里有圆点和方向按钮图标，再通过span不同的class来设置背景图不同的位置:background-position，这种方法只需要一次http请求，然后通过CSS来控制图片的位置，提高了页面效率。

Javascript

加入JS代码：

$(function(){    $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", slideWrapper : "#jFlowSlide", selectedWrapper: "jFlowSelected", width: "680px", height: "138px", prev: ".j_prev", next: ".j_next" }); });

在任务完成之前别忘了将jquery库和jFlow插件引用进来。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联网站建设公司，的支持。

网站名称：如何进行jQuery内容滑动特效插件的应用-创新互联
转载源于：https://www.cdcxhl.com/article26/cepocg.html

成都网站建设公司_创新互联，为您提供网站设计公司、全网营销推广、服务器托管、营销型网站建设、搜索引擎优化、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联