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了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
随机推荐
- 解决maven项目java中配置文件打包被忽略
pom.xml中添加以下配置 <build> <!--配置打包时不过滤非java文件开始 --> <!--说明,在进行模块化开发打jar包时,maven会将非java文件 ...
- Android如何运行他人工程
首先新建一个本地的新工程做对比,用记事本打开以下的几个工程文件,把本地工程文件的内容覆盖掉他人工程的文件内容,注意只覆盖两个工程共有的内容条目即可,不要删掉他人工程的其他依赖!(具体哪几个文件本人还没 ...
- ANSYS中 *VWRITE命令使用
目录 1. *VWRITE命令 2. Fortran字段描述符 1. *VWRITE命令 ANSYS输出结果到文件,采用*VWRITE命令,具体命令如下: *VWRITE,Par1,Par2,.... ...
- vue动态生成组件
单个组件引用,引入此文件js.全局使用,注册到vue的main文件Vue.prototype.create = Create create.js import Vue from 'vue';impor ...
- Blockchain资源
程序源码: https://github.com/HuangFJ/pyeth https://www.jianshu.com/p/b72b4eb259b8
- Vue-表单提交
template <form @submit.prevent="submitFrom"> <!-- 注册提交事件 .prevent 阻止表单的默认提交行为 --& ...
- [题解] 2019牛客暑期多校第三场H题 Magic Line
题目链接:https://ac.nowcoder.com/acm/contest/883/H 题意:二维平面上有n个不同的点,构造一条直线把平面分成两个点数相同的部分. 题解:对这n个点以x为第一关键 ...
- Java后台技术（Dubbo入门）
我现在公司提供的产品是即时通讯软件,因为我从.net桌面应用开发转岗,从java后台转项目经理,让我有幸拥有了后台开发人员所有的权限,所有的后台源码和技术文档对我开放,可惜仅在后台待了3周不到,还没来 ...
- spark实验(四)--RDD编程(1)
一.实验目的 (1)熟悉 Spark 的 RDD 基本操作及键值对操作: (2)熟悉使用 RDD 编程解决实际具体问题的方法. 二.实验平台 操作系统:centos6.4 Spark 版本:1.5.0 ...
- 杭电 1059 Dividing
Dividing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...