jq自定义插件—$.fn的使用之(轮播图)兼容性都ok

2024-06-04 13:18

本文主要是介绍jq自定义插件—$.fn的使用之(轮播图)兼容性都ok,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片轮播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
html,body{
padding: 0;
margin: 0;
}
ul,ul li{
list-style: none;
margin: 0;
padding: 0;
}
.box{
}

#banner{
position: relative;
height:auto;
overflow: hidden;
}
#banner ul{
position:absolute;
}
#banner ul li{
float: left;
}
#banner ul li img{
width: 100%;
height: 100%;
}
#banner #prevBtn,#banner #nextBtn{
height:80px;
width:30px;
background:rgba(0,0,0,0.5);
position:absolute;
top:50%;
margin-top:-40px;
font-size:30px;
line-height:80px;
text-align:center;
text-decoration:none;
color:white;
opacity: 0;
transition: opacity 0.8s ease;
}
#banner #prevBtn{
left:0;
}
#banner #nextBtn{
right:0;
}
#banner:hover #prevBtn,#banner:hover #nextBtn{
opacity: 1;
}
.dot{
height:10px;
width:10px;
border-radius:10px;
background:#2196f3;
display:inline-block;
margin:5px;
}
.on{
background: #009688;
}
</style>
</head>
<body>
<div class="box">
<div id="banner">
<ul id="banner-wrap">
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg">
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
(function($){   //形成闭包,将作用域进行限定
$.fn.bannerSwiper=function(option){
this.main={
boxWrap:null,//必填
nextBtn:false,//是否往下启动按钮
prevBtn:false,//是否往上启动按钮
autoPlay:false,//是否启动自动播放
times:3000,//自动轮播的时间间隔,
speed:600,//点击按钮是切换的速度
circle:false,//是否启动小圆点
circleAlign:"center",//小圆点的对其方式
circleClick:false//小圆点是否可以点击
};
var self=this;
this.time=null;
this.options=$.extend({},this.main,option);
self.flag=true;
// 插件入口
this.init=function(){
this.bulid();
}
this.bulid=function(){
var self=this;
var wrap=self.options.boxWrap;
self.num=1;
self.nowTime=+new Date();
self.width=$(window).width();
var firstImg=$(wrap).find('li').first();
var lastImg=$(wrap).find('li').last();
$(wrap).append(firstImg.clone());
$(wrap).prepend(lastImg.clone());
self.length=$(wrap).find('li').length;
$(wrap).width(self.width*self.length);
$(wrap).find('li').width(self.width)
$(wrap).parent().height(480);
$(wrap).parent().width(self.width);
$(wrap).css({'left':-self.width*self.num})
// 是否启动自动轮播
if(self.options.autoPlay){
self.plays();
}
// 是否启动按钮
if(self.options.nextBtn){
self.NextBtn();
}
// 是否启动按钮
if(self.options.prevBtn){
self.prevBtn();
}
// 是否启动小圆点
if(self.options.circle){
self.circle()
}
if(self.options.circleClick){
self.clickCircle();
}


}
// // 鼠标移入时
self.on('mouseenter',function(){
self.stops();
})
// 鼠标移出时
self.on('mouseleave',function(){
self.plays(1);
})


// 开始计时器,自动轮播
this.plays=function(){
var self=this;
// self.stops();
console.log('play')
this.time=setInterval(function(){
self.go(-self.width)
},self.options.times);
}
// 停止计时器
this.stops=function(){
console.log('stop');
clearInterval(self.time)
}
// 手动创建按钮元素
this.prevBtn=function(){
var self=this;
var ele=$("<a href='javascript:;' id='prevBtn'><</a>");
self.append(ele);
$('#prevBtn').bind("click",function(){
self.go(self.width);
})
}
// 手动创建按钮元素
this.NextBtn=function(){
var self=this;
var ele=$("<a href='javascript:;' id='nextBtn'>></a>");
self.append(ele)
$('#nextBtn').bind("click",function(){
self.go(-self.width);
})
}
// 手动创建小圆点
this.circle=function(){
var self=this;
var ele=$('<div id="circle-wrap"></div>');
for(var i=0;i<self.length-2;i++){
$('<a class="dot" href="javascript:;"></a>').appendTo(ele)
}
ele.css({
"position":"absolute",
'bottom':'0',
'right':'0',
'left':'0',
'height':'20px',
"padding":"0 10px",
'text-align':self.options.circleAlign
});
self.append(ele);
self.playCircle(this.num-1);

}
//小圆点指定当前项
this.playCircle=function(num){
$('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
}
// 点击小圆点
this.clickCircle=function(){
var self=this;
$('#circle-wrap').find('.dot').on('click',function(){
self.num=$(this).index()+1;
self.circlePlay()
})
}
// 点击小圆点,图片切换
this.circlePlay=function(){
self.flag=true;
if(self.flag){
self.flag=false;
$(self.options.boxWrap).stop().animate({
'left':-self.num*self.width
},self.options.speed,function(){
self.flag=true;
});
}
self.playCircle(this.num-1);
}
// 点击按钮,进行轮播,以及自动轮播
this.go=function(offset){
var self=this;
if(self.flag){
self.flag=false;
if(offset<0){
self.num++;
if(self.num>self.length-2){
self.num=1;
}
}
if(offset>0){
self.num--;
if(self.num<=0){
self.num=self.length-2
}
}
if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){
           $(self.options.boxWrap).css({
               'left':-self.width
           });
       }
       if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){
           $(self.options.boxWrap).css({
               'left':-self.width*(self.length-2)
           })
       }
       self.playCircle(this.num-1);
$(self.options.boxWrap).stop().animate({
'left':$(self.options.boxWrap).position().left+offset
},self.options.speed,function(){
self.flag=true;
});
}
}
this.init();
}
})(jQuery);
$('#banner').bannerSwiper({
boxWrap:"#banner-wrap",
nextBtn:true,
prevBtn:true,
autoPlay:true,
circle:true,
circleClick:true
})
</script>
</body>

</html>




/*另外一种最常见的兼容ie7,8的banner*/

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="js/jquery.min.js"></script>
<style type="text/css">
#ad {
width: 1350px;
height: 370px;
overflow: hidden;
margin-left: -5px;
position: relative;
}


#ad ul {
list-style: none;
position: absolute;
margin-left: -40px;
}


#ad ul li {
float: left;
width: 1350px;
height: 370px;
position: relative;
}


.slideshortcut a {
color: #000000;
text-decoration: none;
background-color: #fff;
display: block;
position: absolute;
z-index: 500;
top: 150px;
width: 50px;
height: 50px;
border: 1px solid red;
font-size: 40px;
line-height: 40px;
text-align: center;
opacity: 0;
}


.slideshortcut a:hover {
color: #000000;
text-decoration: none;
}


.prev {
left: 150px;
}


.next {
left: 1200px;
}


.jiaodiandiv {
position: absolute;
z-index: 200;
top: 320px;
left: 42%
}


.jiaodiandiv ul {
list-style: none;
}


.jiaodiandiv ul li {
width: 30px;
height: 30px;
margin-left: 10px;
float: left;
border: 1px solid #B7B7B7;
background-color: #B7B7B7;
border-radius: 15px;
text-align: center;
}


#selectli {
background-color: #FF4400;
}


.jiaodiandiv li:hover {
cursor: pointer;
}


.jiaodiandiv span {
font-size: 20px;
line-height: 30px;
}
</style>
 </head>
 <body>
     <div id="ad"> 
       <ul> 
        <li> <a href="#" title="位置1"><img src="ad.png" /></a> </li> 
        <li> <a href="#" title="位置2"><img src="1.jpg" /></a> </li> 
        <li> <a href="#" title="位置3"><img src="2.jpg" /></a> </li> 
        <li> <a href="#" title="位置4"><img src="3.jpg" /></a> </li> 
       </ul> 
      </div> 
      <div class="slideshortcut"> 
       <a id="SlidePrev" class="prev">&lt;</a> 
       <a id="SlideNext" class="next">&gt;</a> 
      </div> 
      <div class="jiaodiandiv"> 
       <ul> 
        <li id="selectli"><span>1</span></li> 
        <li><span>2</span></li> 
        <li><span>3</span></li> 
        <li><span>4</span></li> 
       </ul> 
  </div>
  <script>
  $(document).ready(function() {
    /*轮播*/
    var index = 0;
   // var jdlis = $('.jiaodiandiv li');
    /*焦点li元素集合*/
    var timer;
    var liWidth = $('#ad').width();
    var len = $("#ad ul li").length;
    $("#ad ul").css("width", liWidth * (len));//左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
    $("#SlidePrev").click(function() {//上一张按钮
        clearInterval(timer);
        index -= 1;
        if (index == -1) {
            index = len - 1;
        }
        showPic(index);
    });
    $("#SlideNext").click(function() { //下一张按钮
        clearInterval(timer);
        index += 1;
        if (index == len) {
            index = 0;
        }
        showPic(index);
    });
    //轮播
    $('#ad').hover(function() {
        clearInterval(timer);
        /*停止动画*/
        $('.slideshortcut a').show().css('opacity', '0.4');
    },
    function() {
        $('.slideshortcut a').hide();
        timer = setInterval(function() {
            showPic(index);
            index++;
            if (index == len) {
                index = 0;
            }
        },
        2000);
    }).trigger("mouseleave");
    /*显示index图片*/
    function showPic(index) {
        var nowLeft = -index * liWidth;
        jdlis.eq(index).css('backgroundColor', '#FF4400');
        jdlis.not(jdlis.eq(index)).css('backgroundColor', '#B7B7B7');
        $("#ad ul").stop(true, false).animate({
            "left": nowLeft
        },
        300);
    }
    $('.slideshortcut a').mouseover(function() {
        $('.slideshortcut a').show();
    });
    $('.prev').mouseover(function() {
        $(this).css({
            opacity: '0.95',
            cursor: 'pointer'
        });
    });
    $('.next').mouseover(function() {
        $(this).css({
            opacity: '0.95',
            cursor: 'pointer'
        });
    });
    /*点击焦点区的div显示对应图*/
    jdlis.click(function() {
        clearInterval(timer);
        index = jdlis.index(this);
        showPic(index);
    });
});
  </script>
 </body>
 </html>

这篇关于jq自定义插件—$.fn的使用之(轮播图)兼容性都ok的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1030188

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti