jQuery和扩展扩展版的旋转木马效果图

这个例子给大家分享一个具体的代码版本的jQuery，并扩展了旋转木马的图形，供大家参考，具体内容如下

具体代码如下

文件

* {
保证金：0；
填充：0；
字体大小：14px；
WebKit的用户选择：无；
}
UL
列表样式：无；
}
img {
显示块；
边界：无；
}
一个{
文字装饰：无；
}
旗帜{。
职位：相对；
保证金：10px汽车；
宽度：1000px；
身高：300px；
溢出：隐藏；
}
bannerinner {。
宽度：100%；
身高：100%；
背景：URL（， / / IMG违约。gif）没有重复的中心；
}
bannerinner div {。
位置：绝对；
顶部：0；
左：0；
Z指数：0；
宽度：100%；
身高：100%；
不透明性：0；
滤镜：alpha（不透明度= 0）；
}
bannerinner div img {。
显示：无；
宽度：100%；
身高：100%；
}
bannertip {。旗帜。
位置：绝对；
右：20px；
底部：20px；
Z指数：10；
溢出：隐藏；
}
banner.bannertip李{。
浮点数：左；
左：10px保证金；
宽度：18px；
身高：18px；
背景：浅蓝色；
边框半径：50%；
光标：指针；
}
。banner.bannertip BG {李。
背景：橙色；
}
横幅横幅
显示：无；
位置：绝对；
顶部：50%；
边距：-22.5px；
Z指数：10；
宽度：30px；
身高：45px；
不透明性：0.5；
滤镜：alpha（不透明度= 50）；
背景图像：URL（'。 / /预IMG。png）；

}
旗帜a.bannerleft {。
左：20px；
背景位置：0 0；
}
旗帜a.bannerright {。
右：20px；
背景位置：- 50px 0；
}
旗帜A：悬停{
不透明性：1；
滤镜：alpha（不透明度= 100）；
}


JQuery.fn.extend（{
横幅：mybanner
}）
通过jQuery选择器或筛选方法获得jQuery集合，没有DOM映射机制，在访问DOM集合之前，页面html结构发生了变化，集合中的内容将自动不随变化而变化（js以DOM映射获得元素集）
功能mybanner（选择器，ajaxurl，间隔）{
VaR的旗帜=美元（美元+选择# ）；
VaR bannerinner美元=美元banner.children（。bannerinner ），divlist美元= null，imglist美元= null；
VaR bannertip美元=美元banner.children（。bannertip ），奥利斯美元= null
VaR bannerleft美元=美元banner.children（。bannerleft ），bannerright = $（美元banner.children 。bannerright ）

从1和Ajax读取数据
var JSONData = null；
$ ajax（{
网址：ajaxurl +_ =（+数学。随机），
类型：' '，
DataType：：JSON
异步：假，当前请求同步 / /
成功：函数（数据）{
JSONData=数据；

}
}）
2，实现数据绑定
功能binddata（）{
var
如果（JSONData）{
使用美元。每个（JSONData /初级）
美元。每个（JSONData，功能（指标项）{
=；
指数= = = 0str2 + =：=出现
}）

bannerinner.html美元（STR）；
bannertip.html美元（出现）；
divlist = bannerinner.children美元美元（div）
imglist = $（美元bannerinner.find 'img）
bannertip.children奥利斯美元=美元（礼）
}
}
3，图像的延迟加载
window.settimeout（lazyimg，500）；
功能lazyimg（）{
/ / jQuery元素集是直接写在imglist.each美元（）
imglist.each美元（功能（指标项）{
无功_this =这；
无功oimg =新形象；
oimg.src = $（this）。Attr（trueimg ）； / / $（这）相当于$（项）
oimg.onload =函数（）{
$（_this）。道具（'src '，这，SRC）。Css（显示
}
}）
divlist.eq美元（0）。Css（在
}
旋转木马图/包交换效应
功能changebanner（）{
VaR curdiv美元= divlist.eq美元（步骤）；
curdiv.css美元（在
curdiv.animate美元（{ 1 }，不透明度：300，函数（））{
$（））兄弟（Css）。
}）
olis.eq美元（步）。AddClass（BG）。兄弟姐妹（）RemoveClass（'bg）。
}
4，自动旋转木马
Interval = interval || 3000;
步骤= 0 =零，自动计时器；
自动计时器= window.setinterval（自动载物、间隔）
功能自动载物（）{
如果（步= JSONData。length-1）{
步骤= 1；
}
步骤+；
ChangeBanner（）；
}
5，控制按钮和开始自动显示隐藏的旋转木马和暂停。
banner.on美元（'mouseover，函数（）{（）{
window.clearinterval（自动开关）；
bannerleft.css美元（显示
bannerright.css美元（显示
}），（'mouseout，函数（）{（）{
自动计时器= window.setinterval（自动载物、间隔）；
bannerleft.css美元（显示
bannerright.css美元（显示

}）
6，实现焦点开关
olis.on美元（听到咔哒声，函数（）{（）{
步骤= $（this）；
ChangeBanner（）；
}）

7，实现左右切换
bannerright.on美元（听到咔哒声，自动载物）；
bannerleft.on美元（听到咔哒声，函数（）{（）{
如果（步骤=＝0）{
步= jsondata.length；
}
一步一步；
ChangeBanner（）；
}）；

}
/外部使用
$（）。横幅（bannerfir

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。