本文实例为大家分享了jquery版本轮播图及延长扩展的具体代码,供大家参考,具体内容如下
具体代码如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
字体大小:14 px;
-webkit-user-select:没有;
}
ul,李{
list-style:没有;
}
img {
显示:块;
边界:没有;
}
一个{
文字修饰:没有;
}
.banner {
位置:相对;
保证金:10 px汽车;
宽度:1000 px;
身高:300 px;
溢出:隐藏;
}
.bannerInner {
宽度:100%;
高度:100%;
背景:url (. ./img/default.gif)没有重演中心中心;
}
.bannerInner div {
位置:绝对的;
上图:0;
左:0;
z - index: 0;
宽度:100%;
高度:100%;
透明度:0;
过滤器:α(不透明度=0);
}
.bannerInner div img {
显示:没有;
宽度:100%;
高度:100%;
}
.banner .bannerTip {
位置:绝对的;
右:20 px;
底部:20 px;
z - index: 10;
溢出:隐藏;
}
李.banner .bannerTip {
浮:左;
margin-left: 10 px;
宽度:18 px;
高度:18 px;
背景:lightblue;
这个特性:50%;
光标:指针;
}
.banner .bannerTip li.bg {
背景:橙色;
}
.banner一个{
显示:没有;
位置:绝对的;
上图:50%;
margin-top: -22.5 px;
z - index: 10;
宽度:30 px;
高度:45 px;
透明度:0.5;
过滤器:α(不透明度=50);
背景图片:url (. ./img/pre.png);
}
.banner a.bannerLeft {
左:20 px;
背景位置:0 0;
}
.banner a.bannerRight {
右:20 px;
背景位置:-50 px 0;
}
.banner答:{徘徊
透明度:1;
过滤器:α(不透明度=100);
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=昂岱眎d=癰annerFir”比;
& lt; div类=癰annerInner”比;
& lt; div> & lt; img src=" alt=" trueImg=' img/banner1.jpg祝辞& lt;/div>
& lt; div> & lt; img src=" alt=" trueImg=' img/banner2.jpg祝辞& lt;/div>
& lt; div> & lt; img src=" alt=" trueImg=' img/banner3.jpg祝辞& lt;/div>
& lt; div> & lt; img src=" alt=" trueImg=' img/banner4.jpg祝辞& lt;/div>
& lt;/div>
& lt; ul类=癰annerTip”比;
& lt;李类=癰g”祝辞& lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel==巴獠縩ofollow”类的bannerLeft祝辞& lt;/a>
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel==巴獠縩ofollow”类的bannerRight祝辞& lt;/a>
& lt;/div>
& lt; script>
jQuery.fn.extend ({
横幅:myBanner
}）//通过jQuery选择器或者筛选的方法获取到的jQuery集合是不存在dom映射机制的,之前获取到的dom集合,之后再页面中HTML结构改变了,集合中的内容不会跟着自动发生变化(JS获取的元素集合有dom映射的机制)
函数myBanner(选择器、ajaxURL间隔){
var横幅美元=$(" # " +选择器);
var bannerInner=banner.children美元(“.bannerInner”), $ divList=null, imgList美元=零;
var bannerTip=banner.children美元(“.bannerTip”), $奥利=null
var bannerLeft=banner.children美元(“.bannerLeft”), bannerRight=banner.children美元(“.bannerRight”)//1、Ajax读取数据
var jsonData=https://www.yisu.com/zixun/null;
. ajax({美元
url: ajaxURL + " & # 63; _=" + math . random (),
类型:“得到”,
数据类型::“json”,
异步:假的,//当前的请求是同步的
成功:功能(数据){
jsonData=https://www.yisu.com/zixun/data;
}
}）//2,实现数据的绑定
函数bindData () {
var str=" ", str2=" ";
如果(jsonData) {//原生的jsonData使用美元each ()
每美元(jsonData函数(指数项){
str +=& lt; div> & lt; img src=" alt=" trueImg=薄?项目(“img”) +”“祝辞& lt;/div>”;
指数===0 & # 63;str2 +=? lt;李类=癰g”祝辞& lt;/li>”: str2 +=? lt; li> & lt;/li>
}）
美元bannerInner.html (str);
美元bannerTip.html (str2);
divList=bannerInner.children美元(" div ")
imgList=bannerInner.find美元(img)
奥利=bannerTip.children美元(“李”)
}
}//3,实现图片的延迟加载
window.setTimeout (lazyImg, 500);
函数lazyImg () {//jquery元素集合直接写imgList.each美元()
imgList.each美元(函数(指数项){
var _this=;
var oImg=新形象;
oImg。src=https://www.yisu.com/zixun/(美元).attr (trueImg ");//美元(这)等价于美元(项)
oImg。onload=function () {
$ (_this) .prop (“src”, this.src) . css(“显示”、“块”)//内置属性使用道具
}
}）
美元divList.eq (0) . css (“zIndex”, 1) .animate({不透明度:1},300);
}//封装一个轮播图切换的效果
函数changeBanner () {
var curDiv=divList.eq美元(步骤);
美元curDiv.css (“zIndex”, 1) .siblings () . css (" zIndex ", 0);
curDiv.animate美元(300年{不透明度:1},函数(){
美元(这).siblings () . css(“不透明度”,0)
}）
美元oLis.eq(步骤).addClass (bg) .siblings () .removeClass (bg)
}//4,实现自动轮播
间隔=间隔| | 3000;
var=0,步自动定时器=零;
自动定时器=setinterval (autoMove间隔)
函数autoMove () {
如果(步骤===jsonData.length-1) {
一步=1;
}
步+ +;
changeBanner ();
}//5、控制左右按钮的显示隐藏和自动轮播的开始和暂停
美元banner.on(鼠标悬停,函数(){
window.clearInterval(自动定时器);
bannerLeft.css美元(“显示”、“块”)
bannerRight.css美元(“显示”、“块”)
})。(mouseout,函数(){
自动定时器=setinterval (autoMove,间隔);
bannerLeft.css美元(“显示”,“没有一个”)
bannerRight.css美元(“显示”,“没有一个”)
}）//6,实现焦点切换
oLis.on美元(“点击”,函数(){
步骤=$ ().index ();
changeBanner ();
}）//7,实现左右切换
美元bannerRight.on(“点击”,autoMove);
bannerLeft.on美元(“点击”,函数(){
如果(步骤===0){
一步=jsonData.length;
}
一步,;
changeBanner ();
});
}//外部使用
$ ().banner (“bannerFir”、“json/banner.txt”, 1000年)
& lt;/script>
& lt;/body>
& lt;/html>
