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了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
随机推荐
- acm数论之旅--组合数（转载）
随笔 - 20 文章 - 0 评论 - 73 ACM数论之旅8---组合数(组合大法好(,,• ₃ •,,) ) 补充:全错排公式:https://blog.csdn.net/Carey_Lu/ ...
- 【代码学习】PYTHON 进程
一.进程和程序的区别 编写完毕的代码,在没有运行的时候称之为程序 正在运行的代码,称之为进程 进程除了包含的代码意外,还需要运行的环境等 二.fork import os import time # ...
- 吴裕雄 python 神经网络TensorFlow实现LeNet模型处理手写数字识别MNIST数据集
import tensorflow as tf tf.reset_default_graph() # 配置神经网络的参数 INPUT_NODE = 784 OUTPUT_NODE = 10 IMAGE ...
- c++写入注册表
一.说明: 注册表是Windows重要组成部分,注册表记录了大量有关电脑软硬件的信息.注册表中的值通过其名称标识.值名称由与键名相同的字符组成.值本身可以是字符串.二进制数据或者是32位无符 ...
- jsp用equals判断两个字符串变量是否相等
使用即可: s1.equals(s2) 如果使用场景: if(s1==s2){} 这样使用可能会出现判断无效的情况. 使用if(s1.equals(s2)){}就可以了.
- 从头学pytorch(四) softmax回归实现
FashionMNIST数据集共70000个样本,60000个train,10000个test．共计10种类别. 通过如下方式下载． mnist_train = torchvision.dataset ...
- UIResponder的API
@property(nonatomic, readonly) UIResponder *nextResponder; 返回响应者链中的下一个响应者,或者nil如果没有下一个响应者. @property ...
- RS232与RS485
1.RS232实物图与引脚图? 2.RS485实物图与引脚图?
- 《Web安全攻防 渗透测试实战指南 》 学习笔记 （三）
Web安全攻防 渗透测试实战指南 学习笔记 (三) burp suite详解 是一款集成化渗透测试工 ...
- 2019牛客暑期多校训练营（第十场） Han Xin and His Troop （高精度+拓展中国剩余定理）
题意 裸题 思路 题中的模数之间并不互质,所以应该用拓展中国剩余定理. 但是交上去会炸,__int128过不了,所以用高精度的板子或者java大数都挺好过的. 这里推荐java大数,因为高精度板子用起 ...