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了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

随机推荐

动手动脑5JAVA项目中的常用的异常处理情况
Java异常处理的几个原则如下. (1)不要丢弃异常,捕获异常后需要进行相关处理.如果用户觉得不能很好地处理该异常,就让它继续传播,传到别的地方去处理,或者把一个低级的异常转换成应 ...
RTU license
Right to Use (RTU) licensing is a model in which licenses are not tied to a unique device identifier ...
Python - 查看类的方法和属性，dir()，help()
1. dir()查看类的方法和属性查看slice类的方法和属性 dir(slice) 2.help() 查看某个方法的文档查看slice类中的indices方法 help(slice.indice ...
Python - 八大排序算法
1.序言本文使用Python实现了一些常用的排序方法.文章结构如下: 1.直接插入排序 2.希尔排序 3.冒泡排序 4.快速排序 5.简单选择排序 6.堆排序 7.归并排序 8.基数排序上述所有的 ...
Linux 笔记：路径
路径 pwd:查看当前路径 cd xxx:进入指定路径路径中的一些特殊代表符号: .:当前路径 ..:上一级路径 -:上次访问的路径 /:根路径 ~:当前用户的主目录路径
创建DataTable与DataGridView进行绑定
private DataTable dt = new DataTable(); BindingSource bs = new BindingSource(); /// <summary> ...
list中的对象或者map中的版本号排序 version排序
经常会用到版本号排序,直接把他封装成一个工具用起来比较方便. List<A> aList = new ArrayList<>(); ...aList 赋值 ... Collec ...
如何判断WLC的FUS版本
有些时候,我们在升级WLC的时候,被告知需要升级WLC的FUS,以防止某些漏洞和不必要的情况发生. 1.什么是FUS? Field Upgrade Software (FUS),翻译过来,叫“现场升级 ...
Wireless-MCS
MCS是modulation and coding scheme的缩写,可以翻译为调制和编码格式,我们可以选择配置该参数,来选择AP和Client之间传输的MCS rate,这些数据速率是使用shor ...
sqlserver数据库中char、varchar、text与nchar、nvarchar、ntext数据类型使用详解
很多开发者进行数据库设计的时候往往并没有太多的考虑char, varchar类型,有的是根本就没注意,因为存储价格变得越来越便宜了,忘记了最开始的一些基本设计理论和原则,这点让我想到了现在的年轻人,大 ...

JavaScript一个简单的图片切换布局

JavaScript一个简单的图片切换布局的更多相关文章

随机推荐

热门专题