Shulou(Shulou.com)06/02 Report--

How to carry out jQuery content sliding special effects plug-in application, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

About a month ago, I wrote an article about the application of the jFlow content sliding plug-in, and a friend asked me for more style references. About the basic application of jFlow, you can refer to my previous article: the application of jFlow:jQuery content sliding special effects plug-in. This article is a sequel to the previous article, which mainly introduces how to use CSS style to design sliding interfaces with different effects.

This paper mainly introduces how to use CSS style to design sliding interface with different effects.

The designs of three effects are introduced.

Demo 1: dot navigation, automatic switching

Demo 2: dot navigation, direction button switch

Demo 3: personalized switching

Netizens who often go to see Xunlei should be very familiar with Demo 2. Xunlei's website uses this sliding effect to show more films in limited space. Demo 1 and Demo 2 are inspired by Thunderbolt. Let's take Demo 2 as an example to explain the design process.

HTML

Dongguan Jiyuan Technology Development Co., Ltd.

Shenzhen Rose Stone Technology Co., Ltd.

Angel mannequin

...

Description:. Represents a duplicate p.slide_wrap, with several slide_wrap as long as there are several items to scroll.

The schematic diagram of the HTML DIV structure is as follows:

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; Zmuri 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 is the outermost DIV, containing the entire slide content and navigation control bar, setting its width, height, background color, and border.

Pro is the DIV that controls every small picture and title of scrolling content, setting things like left float, width, height, and spacing.

# myController is used to set the navigation style and set the absolute position position:absolute,z-index value. Set a background picture arr_icon.gif to the span tag inside, which has dots and direction button icons, and then sets different locations of the background image through span different class: background-position, this method only needs a http request, and then through CSS to control the position of the picture, improving the efficiency of the page.

Javascript

Add the JS code:

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

Don't forget to reference the jquery library and the jFlow plug-in before the task is done.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.