自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery)。

其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了。

但是还有两个问题

  1. 没有做左右按钮效果
  2. 没有写成面向对象

代码先放上来存着,后续还会加上左右按钮并且试着写成面向对象。

demo : http://codepen.io/NightLostK/full/BypVeY

HTML:

 <div class="pic_flash">
<ul>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu04.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu01.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu02.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu03.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu04.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu01.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
</ul>
</div>

CSS:

 li { list-style:none;}

JAVASCRIPT:

 $(function(){

         //使用方法, 变量$picFlash 的 选择器对应上你的 类名或者ID名即可

     var flash = (function(){
var $picFlash = $('.pic_flash');
//给图片列表添加类名
$picFlash.children(':first').attr('class','pic_list');
//设置样式
$('.pic_list li').css('float','left').children('a').css({'display':'block', 'float':'left'});
$('.pic_list li a img').css('float','left'); //获取图片宽度
var imgWitdh = $picFlash.find('img').eq(0).width(); //获取图片数量
var imgLen = $picFlash.find('img').length; //获取图片高度
var imgH = $picFlash.find('img').eq(0).height(); //设置图片ul 宽高
$picFlash.children('ul').eq(0).width(imgWitdh*imgLen).height(imgH); //设置轮播可见区域的宽高, 且隐藏溢出
$picFlash.height(imgH).width(imgWitdh).css({'overflow':'hidden','margin':'0 auto'}); $('.pic_list').css('margin-left', -imgWitdh + 'px'); /*******************添加小圆点按钮*************************************/ var oBtn = "<ul class='btn_list'></ul>"; $picFlash.append(oBtn); for(var i = 0; i < imgLen-2; i++){
$('.btn_list').append('<li></li>');
} //设置按钮 大小和位置单位
var btEm = imgH/20; //按钮li 样式
$('.btn_list li').css({
'height':btEm + 'px',
'width':btEm + 'px',
'background-color':'#faf',
'margin-right':btEm/2 + 'px',
'float':'left',
'border-radius':btEm
});
//第一个按钮默认当前
$('.btn_list li').eq(0).css('background-color','#f6f'); //按钮ul 样式
$('.btn_list').width(7*btEm).height(btEm).css({
'position':'absolute',
'left':0,
'bottom':btEm/2 + 'px',
'left':imgWitdh/2-3*btEm + 'px'
}); $picFlash.css('position','relative'); //设置按钮序列
var btnIndex = 1; var picIndex = 2; //动画主函数
var movie = function(){ $('.btn_list li').eq(btnIndex).css('background-color','#f6f').siblings().css('background-color','#faf');
if(picIndex == imgLen-1){
$('.pic_list').stop(true).animate({'margin-left': -picIndex * imgWitdh + 'px'},'',function(){
$(this).css('margin-left', -imgWitdh + 'px');
});
}else{
$('.pic_list').animate({'margin-left': -picIndex * imgWitdh + 'px'});
} } var setInterValue = setInterval(function(){ movie()
btnIndex++;
picIndex++;
if(btnIndex == imgLen-2){
btnIndex = 0
}
if(picIndex == imgLen){
picIndex = 2
} },2000) var setTimeClose; //按钮点击事件
$('.btn_list li').click(function(){ clearTimeout(setTimeClose); var index = $(this).index() + 1; $('.pic_list').stop(true,false);
clearInterval(setInterValue);
//清空周期后,重置 btnIndex 和 picIndex
btnIndex = index;
picIndex = index + 1;
if(btnIndex == imgLen-2){
btnIndex = 0
}
if(picIndex == imgLen){
picIndex = 2
} $(this).css('background-color','#f6f').siblings().css('background-color','#faf'); console.log(index);
$('.pic_list').stop(true).animate({'margin-left':-index*imgWitdh + 'px'}); //继续周期
setTimeClose = setTimeout(function(){
setInterValue = setInterval(function(){ movie()
btnIndex++;
picIndex++;
if(btnIndex == imgLen-2){
btnIndex = 0
}
if(picIndex == imgLen){
picIndex = 2
} },2000);
},2000); }); //待定返回
return { } })(); });

jQuery仿淘宝图片无缝滚动轮播的更多相关文章

  1. 3、js无缝滚动轮播

    另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...

  2. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  3. JS实现文字向上无缝滚动轮播

    效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  5. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  6. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  7. 使用jQuery仿淘宝商城多格焦点图滚动切换效果

    1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...

  8. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  9. JQuery仿淘宝滚动加载图片

    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...

随机推荐

  1. java+tomcat+Eclipse+mysql配置

    Java下载及配置: 1. 下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  2. android studio没有浮现函数用法和属性说明?

    最近转用android studio,在使用eclipse和android studio时原本在鼠标停留处或智能提示能浮现文档相关内容,但我的是一直显示Fetching Documentation…… ...

  3. 单片AT89C2051 + SD卡 + 3310LCD = 音乐播放器

    http://www.amobbs.com/thread-4503884-1-1.html 这个小玩意,采用 ATMEL 的传统51MCU作主控制芯片,加上SD卡和显示屏,就可以作简单的音乐播放器了, ...

  4. 功能强大的HTML

    HTML基本标签(一) 1.什么是HTML html:Hyper TextMakeup language:超文本标记语言 html:网页的“源码” 浏览器:“解释和执行”html源码的工具 2.网页的 ...

  5. 【转】Linux 标准目录结构

    初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp ...

  6. 开心的金明<0-1背包>

    题意:0-1背包经典题: 不多述,直接上代码: 1.二维数组表示法: #include<cstdio> #include<iostream> #include<algor ...

  7. zencart_magiczoom

    mod_zencart_magiczoom使用   一.复制相应文件到相应目录. 二.安装sql文件. 三.按照正确命名上传商品图片,一般需要中图跟大图. 四.程序运行时会在images目录下创建ma ...

  8. PAT1009

    多项式乘法 和多项式加法类似,参考之前多项式加法的代码改改就出来了. 主要是注意一下.最大次数应该会有1000000,然后按照乘法规则来,分配率就没有问题 #include<cstdio> ...

  9. Quartz总结(四):动态修改定时器二

    前文:http://www.cnblogs.com/LiuChunfu/p/5598806.html 提到了一种动态修改定时器的方法, 其本质就是在job方法中注入Schedular的对象,从Sche ...

  10. HDU 5534 完全背包

    Partial Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...