JavaScript一个简单的图片切换布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ padding:; margin:;}
#slider{ width:%; position:relative; border:0px solid red; height:320px;overflow:hidden; margin:200px auto;}
.pic{ width:1000px; height:320px; position:absolute; left:%; margin-left:-500px; border:0px solid red;overflow:-hidden;}
.pic ul{ height:330px; border:0px solid red; position: absolute;}
.pic ul li{ width:1000px; float:left; list-style:none;}
.pic img { width:1000px; height:320px; border:none; float:left;} .bg{-moz-opacity: 0.5;opacity:.;filter: alpha(opacity=); cursor: pointer;}
.pre{ width:%; height:320px; background:#ccc; position:absolute; left:-%; margin-left:-500px; z-index:; text-align: right;}
.next{ width:%; height:320px; background:#ccc; position:absolute; left:%; margin-left:500px; z-index:;}
.hd{ width:%; height:25px; border:0px solid green; position:absolute; bottom:5px; text-align:center; z-index:;}
#hd2{ border:0px solid #fff; height: 25px; line-height: 25px; position: absolute; left: %;}
#hd2 a{ width:25px; height:25px; display:block; margin: 5px; text-align:center; color:#fff; background:#f60; border-radius: 15px; float:left; text-decoration:none;}
#hd2 a.on{ background: #f00; color:#FFCC00;width:25px; height:25px;display:block;}
</style> <script type="text/javascript">
window.onload = function (){
var oPic = document.getElementById("sPic");
var aLi = oPic.getElementsByTagName("li");
var oD = document.getElementById("hd2");
var aA = oD.getElementsByTagName("a");
var oPre = document.getElementById("pre");
var oNext = document.getElementById("next");
var iNow = ;
var iSpeed = ;
var timer = null;
oPic.innerHTML +=oPic.innerHTML;
var beginL = -aLi[].offsetWidth * ;
oPic.style.left = ;
oPic.style.width = aLi[].offsetWidth * aLi.length + "px";
oD.style.width = *aLi.length + "px";
var l =;
var l2; oNext.onclick = function(){
toNext();
} picSpace(); function picSpace(){
for (var i = aLi.length - ; i > aLi.length - ; i--) {
if (oPic.offsetLeft > -aLi[].offsetWidth) {
aLi[i].style.position = "relative";
aLi[i].style.left = -aLi.length * aLi[].offsetWidth + "px";
}else{
aLi[i].style.position = "";
aLi[i].style.left = "";
}
};
} function checkNum(vArg){
var nNow = iNow;
for (var i = ; i < aLi.length/; i++) {
aA[i].className = "";
};
if(vArg=="pre"){
nNow -=;
if(nNow > aLi.length / -){
nNow = nNow - aLi.length/;
}
}else{
if(nNow > aLi.length / -){
nNow = nNow - aLi.length/;
}
if (iNow > aLi.length - ){
nNow = ;
};
}
//console.log(nNow);
aA[nNow].className = "on";
} function toNext(){
checkNum();
if(iNow > aLi.length -){
iNow = ;
oPic.style.left = aLi[].offsetWidth + "px";
for(var j=;j<aLi.length/;j++){
aLi[j].style.position = "";
aLi[j].style.left = "";
}
}
picSpace();
clearInterval(timer);
timer = setInterval(function(){
l = oPic.offsetLeft - iSpeed;
if(l==-aLi[].offsetWidth * iNow){
clearInterval(timer);
l2 = l;
//document.title = iNow + " , " + l;
iNow++;
if(iNow == aLi.length-){
for(var j=;j<aLi.length/;j++){
//console.log(j);
aLi[j].style.position = "relative";
aLi[j].style.left = aLi.length * aLi[].offsetWidth + "px";
}
}
}
oPic.style.left = l + "px";
//console.log(iNow + " , " + aLi.length + " , " + l + " , " + oPic.style.left + " , " + oPic.offsetLeft + " , " + l2);
},);
} oPre.onclick = toPre; function toPre(){
iNow -=;
if(iNow == ){
iNow = ;
for(var i=;i<aLi.length;i++){
aLi[i].style.position = "";
aLi[i].style.left = "";
}
for(var i=;i<;i++){
aLi[i].style.position = "relative";
aLi[i].style.left = aLi.length * aLi[].offsetWidth + "px";
}
oPic.style.left = -aLi.length * aLi[].offsetWidth + "px";
}
if(oPic.offsetLeft > -(aLi.length-) * aLi[].offsetWidth){
for(var i=;i<aLi.length;i++){
aLi[i].style.position = "";
aLi[i].style.left = "";
}
} clearInterval(timer);
timer = setInterval(function(){
checkNum("pre");
l = oPic.offsetLeft + iSpeed;
if(l==-(iNow-) * aLi[].offsetWidth){
clearInterval(timer);
if(iNow < ){
for(var j=aLi.length/;j< aLi.length;j++){
aLi[j].style.position = "relative";
aLi[j].style.left = -aLi.length * aLi[].offsetWidth + "px";
} }
}
oPic.style.left = l + "px";
//console.log(iNow + " , " + aLi.length + " , " + l + " , " + oPic.style.left + " , " + oPic.offsetLeft);
},);
} for(var i=;i<aLi.length/;i++){
var oA = document.createElement("a");
oA.innerHTML = i+;
if(i==){
oA.className = "on";
}
oA.href = "javascript:;";
oD.appendChild(oA); aA[i].index = i; aA[i].onclick = function(){
console.log("i:" + i + " , index:" + this.index + " , iNow:" + iNow);
}
}
}
</script> </head> <body> <div id="slider">
<div class="pic">
<ul id="sPic">
<li><a href=""><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg" alt="" title="" /></a></li>
<li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg" alt="" title="" /></a></li>
<li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg" alt="" title="" /></a></li>
<li><a href=""><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg" alt="" title="" /></a></li>
</ul>
</div> <div class="hd">
<div id="hd2"></div>
</div> <div class="pre bg" id="pre">pre</div>
<div class="next bg" id="next">next</div> </div> </body>
</html>
- 待续...
JavaScript一个简单的图片切换布局的更多相关文章
- JavaScript 最简单的图片切换
使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...
- Expression Blend4经验分享：制作一个简单的图片按钮样式
这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- 用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
- Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器
新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView 两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...
- [MFC] 梳理一个简单的图片处理桌面软件中用到的MFC控件技巧
前言 前些天应好友之拖,帮忙设计一个简单的图像处理的小软件.朋友把核心算法封装好了,但是是用openCV类似于console的编程环境,要我在此基础上改成MFC桌面程序.下图是做成之后的效果: 我是 ...
- jquery 实现的一款超简单的图片切换功能
<html><head> <meta http-equiv="Content-Type" content="text/html; chars ...
- 基于jQuery的一个简单的图片查看器
项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
随机推荐
- python自动更新升级失败解决方案
1,使用python -m pip install --upgrade pip升级失败 2,使用python -m pip install -U --force-reinstall pip依然失败 3 ...
- [USACO12JAN]牛联盟Bovine Alliance
传送门:https://www.luogu.org/problemnew/show/P3043 其实这道题十分简单..看到大佬们在用tarjan缩点,并查集合并.... 蒟蒻渣渣禹都不会. 渣渣禹发现 ...
- Codeforces Round #597 (Div. 2)D（最小生成树）
/*每个点自己建立一座发电站相当于向超级源点连一条长度为c[i]的边,连电线即为(k[i]+k[j])*两点间曼哈顿距离,跑最小生成树(prim适用于稠密图,kruscal适用于稀疏图)*/ #def ...
- jquery Ajax标准规范写法
$.ajax({ url:"http://www.xxx",//请求的url地址 dataType:"json",//返回的格式为json async:true ...
- 洛谷 P1563 玩具谜题（模拟）
嗯... 题目链接:https://www.luogu.org/problem/P1563 这道题主要问题就是弄明白顺逆时针的问题,其实可以简化成一个异或的问题:当head与x异或值为零时,即为顺时针 ...
- 关于SQL
set nocount on 作用 阻止在结果集中返回显示受t-sql语句影响的行计数信息 set nocount on 不返回计数,set nocount off 返回计数 即使当set nocou ...
- js中substr、substring、indexOf、lastIndexOf的用法
substr substr(start,length)表示从start位置开始,截取length长度的字符串 var str="imgs/header_2.jpg"; consol ...
- Manjaro 与 Windows 双系统时间相差8小时
Manjaro 与 Windows 双系统时间相差8小时 产生原因: Windows 将本地硬件时间作为设定时区(如 UTC+8)的区时,而 Linux 默认将其作为 UTC 时间. 解决方式: 让 ...
- JavaSE复习~基本语法规则
java程序的基本结构 java程序的文件后缀为 .java 一个java文件中可以写许多内容,但有且只能有一个 public 修饰的 class 类(class)是Java程序中所有源代码的基本组成 ...
- Codeforces Round #619 (Div. 2) B. Motarack's Birthday
Dark is going to attend Motarack's birthday. Dark decided that the gift he is going to give to Motar ...