JS 仿淘宝幻灯片 非完整版 小案例
仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4.淘宝幻灯片</title>
<meta name="author" content="Administrator" />
<!-- Date: 2014-12-11 -->
<style>
*{margin:0;padding:0}
#div1{width:400px;height:215px; border:1px solid red;margin:40px auto; overflow:hidden;position:relative }
ul{position:absolute;left:0;top:0}
li{list-style:none;float:left; position: relative}
li.active{background:red}
li.active2{border:1px solid red}
li img{width:400px;}
ol{position:absolute}
ol li{width:15px;height:15px;border-radius:10px;background:#808080;margin:0 3px}
.t{position:absolute;font-size:80px;z-index:2;left:200px;top:100px;color:red;width:100px;height:100px;background:#fff;text-align:center; border:1px solid black}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oUl=oDiv1.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var arr=['3-images/1.jpg','3-images/2.jpg','3-images/3.jpg','3-images/4.jpg','3-images/5.jpg'];
var arr1=['1','2','3','4','5'];
oUl.style.width = aLi.length * aLi[0].offsetWidth +'px'; var oL=document.createElement('ol');
var str='';
for( var i=0;i<aLi.length;i++ ){ str += '<li></li>'
}
oL.innerHTML=str;
oDiv1.appendChild( oL );
document.title = oDiv1.offsetWidth +'-'+oL.offsetWidth;
oL.style.left = (oDiv1.offsetWidth - oL.offsetWidth)/2 +'px';
oL.style.bottom='0px';
var aLi1=oL.getElementsByTagName('li'); var timer=null;
var num=0; function init(){
for(var i=0;i<aLi1.length;i++){
aLi1[i].className=''
}
aLi1[num].className='active'
}
init();
function slide(){
num++;
if(num>=aLi.length) {
num=0;
oUl.style.left = 0;
}
init();
hcMove(oUl,{
'left':-400*num
})
}
timer=setInterval(function(){
slide()
},1000) oDiv1.onmouseover=function(){
clearInterval(timer)
}
oDiv1.onmouseout=function(){
timer=setInterval(function(){
slide()
},1000)
}
for(var i=0;i<aLi.length;i++){
aLi1[i].index=i;
aLi1[i].onclick=function(){
num = this.index;
init();
hcMove(oUl,{'left':-400*num})
}
} }
function css(obj,attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
}
/**完美 缓冲运动 带opacity**/
function hcMove(obj,json,fn){
clearInterval( obj.timer ); obj.timer=setInterval(function(){
var iBtn=true; for(var attr in json){
var target=json[attr]; if( attr == 'opacity' ){
var iSpeed = (target-Math.round(css(obj,attr))*100)/6;
}else{
var iSpeed = (target-parseInt(css(obj,attr)))/6;
} iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了 if( parseInt(css(obj,attr)) != target ){
iBtn=false;//如果有运动没到达目标点,iBtn为false if( attr == 'opacity' ){
var sNow=Math.round(css(obj,attr)*100) + iSpeed; //先做处理 再赋值
if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){
sNow = target
} obj.style[attr] = sNow/100;
obj.style.filter = 'alpha(opacity='+sNow+')';
}else{ var sNow = parseInt(css(obj,attr)) + iSpeed; //先做处理 再赋值
if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){
sNow = target
}
obj.style[attr] = sNow +'px';
} } } if(iBtn){ //如果运动全部完成,iBtn为true
clearInterval(obj.timer);
fn && fn()
} },30)
} </script>
</head>
<body>
<div id="div1">
<ul>
<li mars='1'><img src="3-images/1.jpg"><span class="t">1</span></li>
<li mars='2'><img src="3-images/2.jpg"><span class="t">2</span></li>
<li mars='3'><img src="3-images/3.jpg"><span class="t">3</span></li>
<li mars='4'><img src="3-images/4.jpg"><span class="t">4</span></li>
<li mars='5'><img src="3-images/5.jpg"><span class="t">5</span></li>
</ul>
</div>
</body>
</html>
JS 仿淘宝幻灯片 非完整版 小案例的更多相关文章
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- 原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
- JS仿淘宝星星评价
//直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
- JS仿淘宝左侧菜单
http://www.webdm.cn/webcode/1c724a06-06f4-4c4f-931a-c683285fa700.html
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
随机推荐
- Sara Cope关于text-shadow的介绍
作者:Sara Cope p { text-shadow: 1px 1px 1px #000; } 你可以通过逗号“,”应用多个文本阴影. p { text-shadow: 1px 1px 1px # ...
- python中set元素为可迭代元素相加
#a 与 b必须是两个相同类型的可迭代对象 a = "1" b = "2" print(set(a + b)) # {'1', '2'} a = " ...
- LDA PCA 学习笔记
提要: 本文主要介绍了和推导了LDA和PCA,参考了这篇博客 LDA LDA的原理是,将带上标签的数据(点),通过投影的方法,投影到维度更低的空间中,使得投影后的点,会形成按类别区分,一簇一簇的情况, ...
- PHP网站 通过js方式判断是否是手机访问，若是 跳转到手机版网址！
<script type="text/javascript" src="http://i3.dukuai.com/ui/js/jquery-1.32pack.js& ...
- day01_12/11/2016_Spring入门PPT
s1 s2 s3 s4 s5 s6 s7 s8 IOC1 IOC2 入门编写1 入门编写2 入门编写3 入门编写4---心得
- [转]linux之diff 命令
转自:http://www.cnblogs.com/peida/archive/2012/12/12/2814048.html diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是 ...
- Croppic插件使用介绍-asp.net
具体的参数使用和基本使用方式请看:http://www.uedsc.com/croppic-api.html 需要说明的几点: 1.支持两种上传方式: (1)先将原图上传至服务器,然后再次将切图信息传 ...
- ASP.NET AJAX应用
ASP.NET AJAX能够快速地创建具有丰富的用户体验的页面,而且这些页面由可靠和熟悉的用户接口元素组成,包括一个能快速响应的用户体验和熟悉的用户元素. 使用ASP.NET AJAX,可以改善We ...
- oracle数据库忘记用户名和密码莫着急
刚安装完Oracle 11g后,登录的时候没有记住用户名和密码,解决方法:新建一个用户 第一步:以系统身份登录 cmd--->sqlplus 提示输入用户名,然后输入sqlplus/as sys ...
- Android fragment-findFragmentByTag 始终返回 null
我曾四处看看,在我的案子中找到几个与类似的主题,但没有帮助的问题.我想访问现有活动片段使用getSupportFragmentManager().findFragmentByTag(TAG),但它始终 ...