自己前天,也就是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. Linux格式化硬盘 常用命令小记

    今天新蛋上订购了一块1TB的硬盘打算装Ubuntu,当然先要做好功课,查一下注意事项啦! 基本功,格式化命令,以格式化 /dev/sda1 分区为例:$ sudo umount /dev/sda1   ...

  2. bundle export fail

    C:\eclipse\eclipse.exe -vmargs -Dfile.encoding=utf8

  3. 《LED调光-DMX512灯光协义接收控制》转

    源:http://blog.163.com/zhaojun_xf/blog/static/30050580200951023046891 来自: 作者:龙图开发网 文章来源:龙图开发网 时间:2009 ...

  4. 文件夹添加 IIS 应用程序池用户权限

    http://serverfault.com/questions/81165/how-to-assign-permissions-to-applicationpoolidentity-account ...

  5. CGAffineTransform 放射变换解析 即矩阵变换

    转载自;http://www.cocoachina.com/bbs/3g/read.php?tid=151136 矩阵乘法A B相乘要A的列数等于B的行数才有定义,结果是一个 A行B列的矩阵C,C的每 ...

  6. 在 WinCe 平台读写 ini 文件

    在上篇文章开发 windows mobile 上的今日插件时,我发现 wince 平台上不支持例如 GetPrivateProfileString 等相关 API 函数.在网络上我并没有找到令我满意的 ...

  7. 使用Three.js渲染Sketchup导出的dae

    打算做个轮盘游戏,直接上3D吧. 第一步:制作模型 3DMax和Maya下载和破解比较麻烦, 就用之前的Sketchup来试试吧. 最后效果图: 俯视图 仰视图 制作步骤: 1 先画一个圆 2 从圆心 ...

  8. EasyUI知识点

    1. easyUI实现动态列,js实现 $('#dg').datagrid({ height: 340, url: '${path}/salary/datas.do', method: 'POST', ...

  9. linux下查看cpu物理个数和逻辑个数 - chw1989的专栏 - 博客频道 - CSDN.NET

    body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLi ...

  10. Java谜题心得

    1,二进制浮点数的运算是对实际算数的一种近似运算. 2,IEEE 754浮点算术保留了一个特殊的值用来表示一个不是数字的数量[IEEE 754].这个值就是NaN(“不是一个数字(Not a Numb ...