jQuery仿淘宝图片无缝滚动轮播
自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery)。
其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了。
但是还有两个问题
- 没有做左右按钮效果
- 没有写成面向对象
代码先放上来存着,后续还会加上左右按钮并且试着写成面向对象。
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仿淘宝图片无缝滚动轮播的更多相关文章
- 3、js无缝滚动轮播
另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- JS实现文字向上无缝滚动轮播
效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- 使用jQuery仿淘宝商城多格焦点图滚动切换效果
1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
- 基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...
- JQuery仿淘宝滚动加载图片
用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...
随机推荐
- php的表单安全处理
规则 1:绝不要信任外部数据或输入 关于 Web 应用程序安全性,必须认识到的第一件事是不应该信任外部数据.外部数据(outside data) 包括不是由程序员在 PHP 代码中直接输入的任何数据. ...
- Binary Watch
Binary Watch 描述 Consider a binary watch with 5 binary digits to display hours (00 - 23) and 6 binary ...
- MJRefresh
automaticallyChangeAlpha 下拉或上拉时,文字颜色逐渐加深
- 使用compass更高效的编辑css --- 图片精灵
compass是sass的一个库,关系相当于js中的jq.比较可惜的是compass的文档比较混乱 看的不太舒服,下面是compass的文档地址,有兴趣的可以去看看 http://compass-st ...
- hadoop1.2.1 MultipleOutputs将结果输出到多个文件或文件夹
hadoop1.2.1 MultipleOutputs将结果输出到多个文件或文件夹 博客分类:http://tydldd.iteye.com/blog/2053867 hadoop hadoop1 ...
- FZU 2144 Shooting Game(数学+贪心)
主要思路:求出蚊子到达球的时间区间(用方程得解),对区间做一个贪心的选择,选择尽可能多的区间有交集的区间段(结构体排序即可),然后计数. #include <cstdio> #includ ...
- 更少的直接百度,更多的取看API
很多时候我们会对于一个jar包中的一个类的某个方法犯迷糊 我们不知道传进去什么样子的参数,这个方法的返回值到底是什么样的. 更多的时候我们不知道这个jar中有没有我们想要的这个方法. 很多时候以前我都 ...
- 浏览器UA汇总
UA -- uesr-agent -- 用户代理,是服务器判断请求的种类,比如:使用PC和手机访问一个网站,呈现的画面是不一样的. 原理就是设备的用户代理不同 1 主要浏览器 safari 5.1 ...
- HDU 3265 Posters
矩形面积并,一个拆成四个 #include<cstdio> #include<cstring> #include<cmath> #include<map> ...
- Lua学习系列(二)
资源整理: 风云老师博客: http://blog.codingnow.com/eo/luaoeeeaeau/ 知乎: https://www.zhihu.com/question/20736660 ...