jquery版轮播图效果和extend扩展
程序员文章站
2022-05-26 08:22:25
本文实例为大家分享了jquery版本轮播图及extend扩展的具体代码，供大家参考，具体内容如下
具体代码如下
&...
本文实例为大家分享了jquery版本轮播图及extend扩展的具体代码，供大家参考，具体内容如下
具体代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
-webkit-user-select:none;
}
ul,li{
list-style:none;
}
img{
display:block;
border:none;
}
a{
text-decoration: none;
}
.banner{
position:relative;
margin:10px auto;
width:1000px;
height:300px;
overflow:hidden;
}
.bannerinner{
width:100%;
height:100%;
background:url("../img/default.gif") no-repeat center center;
}
.bannerinner div{
position:absolute;
top:0;
left:0;
z-index:0;
width:100%;
height:100%;
opacity: 0;
filter:alpha(opacity=0);
}
.bannerinner div img{
display:none;
width:100%;
height:100%;
}
.banner .bannertip{
position:absolute;
right:20px;
bottom:20px;
z-index:10;
overflow:hidden;
}
.banner .bannertip li{
float:left;
margin-left:10px;
width:18px;
height:18px;
background:lightblue;
border-radius:50%;
cursor:pointer;
}
.banner .bannertip li.bg{
background:orange;
}
.banner a{
display:none;
position:absolute;
top:50%;
margin-top:-22.5px;
z-index:10;
width:30px;
height:45px;
opacity: 0.5;
filter:alpha(opacity=50);
background-image:url('../img/pre.png');
}
.banner a.bannerleft{
left:20px;
background-position:0 0;
}
.banner a.bannerright{
right:20px;
background-position:-50px 0;
}
.banner a:hover{
opacity: 1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div class='banner' id='bannerfir'>
<div class='bannerinner'>
<div><img src="" alt="" trueimg='img/banner1.jpg'></div>
<div><img src="" alt="" trueimg='img/banner2.jpg'></div>
<div><img src="" alt="" trueimg='img/banner3.jpg'></div>
<div><img src="" alt="" trueimg='img/banner4.jpg'></div>
</div>
<ul class='bannertip'>
<li class='bg'></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerleft'></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerright'></a>
</div>
<script>
jquery.fn.extend({
banner:mybanner
})
//通过jquery选择器或者筛选的方法获取到的jquery集合是不存在dom映射机制的，之前获取到的dom集合，之后再页面中html结构改变了，集合中的内容不会跟着自动发生变化（js获取的元素集合有dom映射的机制）
function mybanner(selector,ajaxurl,interval){
var $banner = $("#"+selector);
var $bannerinner = $banner.children(".bannerinner"),$divlist = null,$imglist = null;
var $bannertip = $banner.children(".bannertip"),$olis = null
var $bannerleft = $banner.children(".bannerleft"),$bannerright = $banner.children(".bannerright")
//1、ajax读取数据
var jsondata = null;
$.ajax({
url:ajaxurl+"?_="+math.random(),
type:'get',
datatype::"json",
async:false,//当前的请求是同步的
success:function(data){
jsondata = data;
}
})
//2、实现数据的绑定
function binddata(){
var str = "",str2 = "";
if(jsondata){
//原生的jsondata使用$.each()
$.each(jsondata,function(index,item){
str+='<div><img src="" alt="" trueimg="'+item["img"]+'"></div>';
index===0?str2+='<li class="bg"></li>':str2+='<li></li>'
})
$bannerinner.html(str);
$bannertip.html(str2);
$divlist = $bannerinner.children("div")
$imglist = $bannerinner.find('img')
$olis = $bannertip.children("li")
}
}
//3、实现图片的延迟加载
window.settimeout(lazyimg,500);
function lazyimg(){
//jquery元素集合 直接写$imglist.each()
$imglist.each(function(index,item){
var _this = this;
var oimg = new image;
oimg.src = $(this).attr("trueimg");//$(this)等价于$(item)
oimg.onload = function(){
$(_this).prop('src',this.src).css("display","block")//内置属性使用prop
}
})
$divlist.eq(0).css("zindex",1).animate({opacity:1},300);
}
//封装一个轮播图切换的效果
function changebanner(){
var $curdiv = $divlist.eq(step);
$curdiv.css("zindex",1).siblings().css("zindex",0);
$curdiv.animate({opacity:1},300,function(){
$(this).siblings().css("opacity",0)
})
$olis.eq(step).addclass("bg").siblings().removeclass('bg')
}
//4、实现自动轮播
interval = interval || 3000;
var step = 0,autotimer = null;
autotimer = window.setinterval(automove,interval)
function automove(){
if(step === jsondata.length-1){
step = -1;
}
step++;
changebanner();
}
//5、控制左右按钮的显示隐藏和自动轮播的开始和暂停
$banner.on('mouseover',function(){
window.clearinterval(autotimer);
$bannerleft.css("display","block")
$bannerright.css("display","block")
}).on('mouseout',function(){
autotimer = window.setinterval(automove,interval);
$bannerleft.css("display","none")
$bannerright.css("display","none")
})
//6、实现焦点切换
$olis.on('click',function(){
step = $(this).index();
changebanner();
})
//7、实现左右切换
$bannerright.on('click',automove);
$bannerleft.on('click',function(){
if(step===0){
step = jsondata.length;
}
step--;
changebanner();
});
}
//外部使用
$().banner("bannerfir","json/banner.txt",1000)
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： iscroll动态加载数据完美解决方法