太原小程序营销_jquery版轮播图效果和extend扩展

2021-01-11 16:02| 发布者: | 查看: |

jquery版轮播图效果和extend扩展       这篇文章主要为大家详细介绍了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;
 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 id='bannerFir' 
 div 
 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 
 li /li 
 li /li 
 li /li 
 li /li 
 /ul 
 a href="javascript:;" rel="external nofollow" rel="external nofollow" /a 
 a href="javascript:;" rel="external nofollow" rel="external nofollow" /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 /li ':str2+=' li /li '
 $(str);
 $(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();

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部