How to write the code of JQ picture rotation chart?
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.
