jQuery轮播图函数封装

函数调用的时候,传递四个必要的参数就行了。
参数1:要运动的ul;
参数2:左边按钮;
参数3:右边按钮;
参数4:运动速度;(可选,默认3s)

代码如下:

html部分:

<div class="div1">
 <ul class="ul1">
     <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
        <li>4444444444</li>
        <li>5555555555</li>
    </ul>
</div>
<div>
 <input id="btn1" type="button" value="←">
 <input id="btn2" type="button" value="→">
</div>

css部分:

* { margin:0; padding:0;}
body { text-align:center;}
.div1 { overflow:hidden; width:350px; height:160px; margin:0 auto; border:3px solid #f00; position:relative;}
.ul1 { position:absolute; left:0; top:0;}
.ul1 li { width:100px; height:150px; float:left; list-style:none;}

js部分:

var imgScroll = {
 //变量
 oUl : null,
 oLiWidth : 0,
 oLiLength : 0, 
 btnLeft : null,
 btnRight : null,
 iIndex : 0,
 timer : null,
 speed : 0,
 
 //函数
 move : function(){
  //复制ul里面的li
  this.oUl.children(‘li‘).clone().appendTo(this.oUl);
  
  this.oLiWidth = this.oUl.children(‘li‘).width();
  this.oLiLength = this.oUl.children(‘li‘).length;
  
  //设置ul宽度
  this.oUl.width(this.oLiWidth*this.oLiLength);
  
  var self = this;
  //左边按钮
  this.btnLeft.bind(‘click‘,function(){
   clearInterval(self.timer);
   if(self.iIndex==self.oLiLength/2){
    self.iIndex = 0;
    self.oUl.stop(true,true).css(‘left‘,‘0‘);
   };
   self.iIndex++;
   self.oUl.stop(true,true).animate({left:-self.iIndex*self.oLiWidth},self.autoMove());
  });
  
  //右边按钮
  this.btnRight.bind(‘click‘,function(){
   clearInterval(self.timer);
   if(self.iIndex==0){
    self.iIndex = self.oLiLength/2;
    self.oUl.stop(true,true).css(‘left‘,-self.iIndex*self.oLiWidth);
   };
   self.iIndex--;
   self.oUl.stop(true,true).animate({left:-self.iIndex*self.oLiWidth},self.autoMove());
  });
 },
 
 //自动轮播
 autoMove : function(){
  var self = this;
  this.timer = setInterval(function(){
   if(self.iIndex==self.oLiLength/2){
    self.iIndex = 0;
    self.oUl.stop(true,true).css(‘left‘,‘0‘);
   };
   self.iIndex++;
   self.oUl.animate({left:-self.iIndex*self.oLiWidth});
  },self.speed);
 },
 
 //初始化(运动的ul,左边按钮,右边按钮)
 init : function(oUl, btnLeft, btnRight, speed){
  this.oUl = oUl;
  this.btnLeft = btnLeft;
  this.btnRight = btnRight;
  this.speed = speed ? speed*1000 : 3000;
  
  this.move();
  this.autoMove();
 }
};
//调用
imgScroll.init($(‘.ul1‘),$(‘#btn1‘),$(‘#btn2‘),2);

有不对或者可以优化的地方,请大家指正,谢谢!

时间: 2024-11-18 03:46:21

jQuery轮播图函数封装的相关文章

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

jQuery轮播图鼠标移入停止,移出播放,点击小横条切换图片

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>banner</title> 7 </head> 8 <style> 9 .banner { 10 min-width: 1200px; 11 min-height: 350px; 12 position: r

jquery轮播图

咱们今天还是轮播图,今天说jquery的轮播图! 首先,要有个插件: 请无视Zepto插件,他没起到任何作用! 就是这两个啦! 然后就是代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js&q

Jquery 轮播图简易框架

=====================基本结构===================== <div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="picture.jpg" alt=&

《第31天:JQuery - 轮播图》

源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个模块:HTML模块,CSS模块,Jquery模块 HTML模块: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQ轮播图</title> &l

iOS: 无限循环轮播图简单封装

轮播图思路: 1.首先要有一个ScrollView和两张图片,把图片放到ScrollView上. 2.要想滚动ScrollView的宽度需设置屏宽的2倍. 3.循环滚动,当滚动到最后一张图片时,采用偏移的方法,将偏移量归零,回到第一张图片. 4.将第二张的图片上的所有值赋给第一张图片. 5.设置让它自己滚动,需添加定时器. 需要的第三方数据库:SDWebImage m.文件内: #imporst "ScrollView.h" @interface ScrollView ()<UI

从对轮播图的封装中体会 面对接口 编程的思想

.h 文件的内容: #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface MFCyclmage : UIView // 私有属性, 可以对外公开, 使用readonly // 一般让别人去修改这个属性的属性(不能修改这个属性) @property (nonatomic, strong, readonly) UIScrollView *cycleScrollView; @property (nonatomic, strong, re

支持触屏的jQuery轮播图插件

移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫.不过功能上简单点,只实现支持触屏和无缝轮播. 1.页面代码 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"> 3 <head> 4 <meta charset="U

首页大屏广告效果 jquery轮播图淡入淡出

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery个性化图片轮播效果</title> <script src="js/jquery.js" type="text/javascript"></script> <link rel=