jquery版轮播图效果和extend扩展
更新时间：2017年07月18日 16:36:11 作者：diasa
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jQuery Validate 相关参数及常用的自定义验证规则
这篇文章主要介绍了jQuery Validate 相关参数及常用的自定义验证规则,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
当要在有限的空间展示更多的信息时，我们经常会采取鼠标滑过弹出更多相关信息层，提高互动性。尤其可以应用在公司照片墙、招聘网站求职者信息展示等等场景，本文给大家分享使用jquery实现鼠标滑过弹出更多相关信息层附源码下载，感兴趣的朋友参考下2015-11-11
众所周知文件上传是Web开发中的重要话题，最直接和简单的方式是通过表单直接提交文件。 下面这篇文章小编就来和大家分享jQuery利用FormData实现文件上传的方法，文中介绍的方法简单易懂，相信对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。2016-11-11
本文给大家汇总介绍了jQuery的四种选择器的使用方法以及示例，非常的简单实用，希望对大家学习jquery能够有所帮助。2016-06-06
一款接近完美的jquery浮动层，会随着滚动条而自动滚动，始终维持在页面的中间部分，利用浮动层你可以制作一个QQ在线客服。2011-08-08
javascript loadScript异步加载脚本示例讲解
本文讲解了javascript异步加载脚本并触发回调函数的方法，在加载远程数据的时候可以用到，下面提供代码示例和源码2013-11-11
本文详细介绍下使用JQuery实现图片的展开和伸缩，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
jQuery Ajax传值到Servlet出现乱码问题的解决方法
jquery ajax 传值给Servlet,在Servlet里Get接受参数乱码,怎么解决呢？下面小编给大家带来了jquery ajax传值到Servlet出现乱码问题的解决方法，一起看看吧2016-10-10
本篇文章主要是对jquery 删除字符串最后一个字符的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了jquery实现的3D旋转木马特效，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
最新评论