js图片轮播插件的封装

2024-12-23 21:26:05

本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。

css 样式

.body{
    width: 700px;
    margin: 100px auto;
    position: relative;
    height: 300px;
    overflow: hidden;
  }
  .body img{
    width: 700px;
    position: absolute;
    display: none;
  }
  .body ul{
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);

  }
  .body li{
    list-style: none;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 50px;
    background: none;
    border: 2px solid #fff;
    margin-right: 10px;
    cursor: pointer;
  }
  .active{
    background-color: #fff !important;

  }
  .body a{
    text-decoration: none;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 30px;
    background-size: 100% 60%;
    background-color: rgba(0,0,0,0.3);
  }
  .left{
    left: 0;
    background: url('../img/left.png') no-repeat center center;
  }
  .right{
    right: 0;
    background: url('../img/right.png') no-repeat center center;
  }

页面结构 html 代码

<body>
  <div class="body">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">

<ul>
      <li class="active"></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:;" class="left"></a>
    <a href="javascript:;" class="right"></a>
  </div>

js部分，插件调用

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/slider.js"></script>
  <script type="text/javascript">
  $.slider({
    imgElement:$(".body img"),
    liElement:$(".body li"),
    leftBtn:$(".left"),
    rightBtn:$(".right"),
    time:2000
  })
</script>

封装的插件

(function($){
  function slider(options){
    this.opts=$.extend({},slider.defaluts,options);
    this._imgSlider();
  }
  //设置默认值
  slider.defaluts={
    imgElement:null,
    liElement:null,
    leftBtn:null,
    rightBtn:null,
    time:2000
  }
  slider.prototype._imgSlider=function(){
    var opts=this.opts,
      index=0,
      len=opts.imgElement.length,
      timeInter=null;
    if(opts.imgElement=='') return;
    opts.imgElement.eq(0).show();
    showTime();
     //当鼠标经过 轮播停止，移开继续
     opts.imgElement.hover(function() {
       clearInterval(timeInter);
     }, function() {
       showTime();
     });

    //点击li 显示对应的图片
    opts.liElement.click(function(){
      var id=$(this).index();
      show(id);
    });
    //向左向右
    opts.leftBtn.click(function(){
      clearInterval(timeInter);
      --index;
      index=Math.max(0,index);
      show(index);
      showTime();
    });
    opts.rightBtn.click(function(){
      clearInterval(timeInter);
      ++index;
      index=Math.min(len-1,index);
      show(index);
      showTime();
    });

    function showTime(){
      timeInter=setInterval(function(){
        index++;
        if(index>len){
          index=0;
        }
        show(index);
      },opts.time);
    }
    function show(index){
      opts.imgElement.eq(index).fadeIn(1000).siblings('img').fadeOut(1000);
      opts.liElement.eq(index).addClass('active').siblings('li').removeClass('active');
    }

  }
  $.extend({
    slider:function(options){
      new slider(options);
    }
  })
})(jQuery)

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

最简单的JavaScript图片轮播代码(两种方法)

通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non
JS实现简易图片轮播效果的方法

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char
js图片自动轮播代码分享(js图片轮播)

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
简单的js图片轮换代码(js图片轮播)

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&quo
原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
带左右箭头图片轮播的JS代码

轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19
原生javascript实现图片轮播效果代码

看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失复制代码代码如下: function id(name) {return document.getElementByI
js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给
js 图片轮播(5张图片)

演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

js图片轮播插件的封装

相关推荐

随机推荐