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了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
随机推荐
- Multisim中'地'的问题
1.地其实就是一个参考电压 对于示波器而言,只用连接一个探头,另一个探头默认就是连接地.
- 会话技术之Cookie
在无状态的客户端(未登录)下,张三想买手机然后把手机加入购物车,服务器发出添加成功的响应,然后把手机加入ServletContext域里,然后张三想在逛逛别的, 再无状态的客户端(未登录)下,李四想买 ...
- java篇 之 数组
数组:本身也是对象元素数据类型必须一致,初始值为各种零(跟类型一致),数组中存放 的是对象的引用(地址),对象在其它空间,一旦创建长度不可变,length可以直 接访问 (new的时候才分配空间,创建 ...
- 吴裕雄 python 人工智能——基于Mask_RCNN目标检测（1）
import os import sys import random import math import numpy as np import skimage.io import matplotli ...
- 页面布局 Wrap 组件 和 RaisedButton按钮
一.RaisedButton 定义一个按钮 Flutter 中通过 RaisedButton 定义一个按钮.RaisedButton 里面有很多的参数,只讲简单的进行使用. return Raised ...
- SEO 建站过程复盘
今天在A5看到一篇关于一个牛站的复盘,整个建站过程值得借鉴. https://www.admin5.com/article/20200218/943930.shtml
- C语言：计算并输出S=1+(1+2^0.5)+(1+2^0.5+3^0.5)...+(1+2^0.5+3^0.5+...+n^0.5)
//计算并输出S=1+(1+2^0.5)+(1+2^0.5+3^0.5)...+(1+2^0.5+3^0.5+...+n^0.5) #include<math.h> #include< ...
- 基础_04_list and tuple
一.list(列表) list是Python里的一种容器,里面可以存储多个任何类型的数据,长度也可以任意伸缩,可以像C语言中数组那样,按照索引下标获取对应的值.但数组是一个存储多个固定类型变量的连续内 ...
- 浅谈python中__str__和__repr__的区别
很多时候我们在创建一个类的时候,在终端打印类或者查看的时候一般都不会得到一个太满意的结果 class T: def __init__(self): self.color="red" ...
- 用myeclipse快速搭建hibernate实现数据库访问
前言 hibernate使用的大致过程为引入jar包.配置主配置文件.配置映射文件.编写实体类.编写dao.但是每一步都需要知道的内容都相对不少,造成困难.如果使用myeclipse提供的支持将非常容 ...