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

This article shows you how to write the code of JQ picture rotation map, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

HTML

one

two

three

CODE

/ / banner Picture switch 0918

Var ty_picScroll = function (options) {

Var fa = this

Var opts = {}

Var clear

This.init = function () {

Opts = {

Box: $("#" + options.box)

Msg: (options.msg==undefined)? true:options.msg

Auto: (options.auto==undefined)? true:options.auto

Speed: options.speed | | 5000

Flag:0

}

Opts.box.on ("click", "span", function () {

ClearInterval (clean)

Clean = setInterval (fa.auto,options.speed)

Index = opts.box.find ("span") .index (this)

If (opts. Percent percent index) {

Fa.picScroll (index)

Opts.flag = index

}

})

Opts.box.find ('.ty _ right') .click (function () {

ClearInterval (clean)

Clean = setInterval (fa.auto,options.speed)

Fa.auto ()

});

Opts.box.find ('.ty _ left') .click (function () {

ClearInterval (clean)

Clean = setInterval (fa.auto,options.speed)

Fa.auto1 ()

});

/ / opts.box.mouseenter (function () {

/ / clearInterval (clean)

/ /}) .mouseleave (function () {

/ / clean = setInterval (fa.auto,options.speed)

/ /})

If (opts.auto) {

Clean = setInterval (fa.auto,options.speed)

}

If (! opts.msg) {

Opts.box.find (".ty _ picMsg") .hide ()

}

}

This.picScroll = function (obj) {

Opts.box.find ("span") .removeClass ("ty_current") .eq (obj) .addClass ("ty_current")

Opts.box.find (".ty _ pic"). FadeOut (500) .eq (obj) .fadein (500)

If (opts.msg) {

Var msg = opts.box.find ("a") .eq (obj) .attr ("data-msg")

Opts.box.find (".ty _ picMsg"). FadeIn (500). Find ("p") .html (msg)

}

}

This.auto = function () {

Var len = opts.box.find ("span") .length

Opts.flag++

If (opts.flag > (len-1)) opts.flag = 0

Fa.picScroll (opts.flag)

}

This.auto1=function () {

Var len=opts.box.find ('span'). Length

If (opts.flag==0) opts.flag=len

Opts.flag--

Fa.picScroll (opts.flag)

}

This.init ()

}

Var picScroll = new ty_picScroll ({

Box: "ty_picScroll", / / box name

Msg:false, / / whether to display the description text

Auto:true, / / whether to play it automatically

Speed:5000 / / rotation speed

});

$("# ty_picScroll") .hover (function () {

$(this) .find (".ty _ btn") .show ()

}, function () {

$(this) .find (".ty _ btn") .hide ()

});

The above content is how to write the code of the JQ picture rotation map. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.