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了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
随机推荐
- 多进程pipe
pipe模块可以实现进程之间数据传递 栗子1:3个进程,一个主进程,2个子进程,三个管道,三个进程通过3个管道连接,主进程发一个信息,通过2个子进程转发,最后回到主进程输出 import multip ...
- hybird怎么实现的（核心webview）
链接:https://blog.csdn.net/gongch0604/article/details/80510005
- Eclipse无法查看第三方jar包文件源代码解决方法
来源于:https://www.cnblogs.com/1995hxt/p/5252098.html 1.打开第三方依赖包,源文件的快捷键:ctrl + mouseClick 2.由于我们下载的第三方 ...
- Python日期
1. datatime from datetime import datetime, date now = datetime.now() print(now) # 2020-01-20 01:24:0 ...
- 「CF858F」 Wizard's Tour
传送门 Luogu 解题思路 首先对于树的情况,我们很显然有一种贪心策略: 对于每一个节点先匹配子树,然后在还可以匹配的儿子间尽可能匹配,要是多出来一个就往上匹配. 推广到图的情况... 我们在图的生 ...
- JPA中实现双向多对多的关联关系(附代码下载)
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
- 从数据库中取数据(Stalberg.TMS.Data)
using System; using System.Data; using System.Data.SqlClient; namespace Stalberg.TMS { //*********** ...
- VMwarePro密钥
VMware10Pro密钥 5F29M-48312-8ZDF9-A8A5K-2AM0Z VMware12Pro密钥 5A02H-AU243-TZJ49-GTC7K-3C61N VF5XA-FNDDJ- ...
- EAP认证
EAP信息交换: 上图中展示的是OTP(一次性密码)实现EAP交换过程,具体的EAP交换过程如下: 步骤1:请求方向认证方发送EAPOL-Start消息,通知对方已经做到了认证准备(注意:若会话由认证 ...
- Cisco AP-Flexconnect配置结果
一个部署Flexconnect AP(印度)注册到远端WLC(上海)的例子:1.连接AP的交换机接口的配置: nterface GigabitEthernet0/4switchport access ...