<!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一个简单的图片切换布局的更多相关文章

  1. JavaScript 最简单的图片切换

    使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...

  2. Expression Blend4经验分享：制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  3. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  6. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

  7. [MFC] 梳理一个简单的图片处理桌面软件中用到的MFC控件技巧

     前言 前些天应好友之拖,帮忙设计一个简单的图像处理的小软件.朋友把核心算法封装好了,但是是用openCV类似于console的编程环境,要我在此基础上改成MFC桌面程序.下图是做成之后的效果: 我是 ...

  8. jquery 实现的一款超简单的图片切换功能

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  9. 基于jQuery的一个简单的图片查看器

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

随机推荐

  1. Android9 http网络请求的问题

    Google表示,为保证用户数据和设备的安全,针对下一代 Android 系统(Android P) 的应用程序,将要求默认使用加密连接,这意味着 Android P 将禁止 App 使用所有未加密的 ...

  2. JS-find、filter、forEach、map

    js这四个方法不会对空数组进行检测,也不会改变原始数组 find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined) //语法 array.find(function(v ...

  3. 「HNOI/AHOI2018」游戏

    传送门 Luogu 解题思路 这是一道 \(O(n^2)\) 暴力加上 \(\text{random_shuffle}\) 优化 什么鬼 就可以 \(\text{AC}\) 的题. 但还是要讲一下 \ ...

  4. php 单机redis 常用命令

    一.Redis连接与认证 //连接参数:ip.端口.连接超时时间,连接成功返回true,否则返回false $ret = $redis->connect('127.0.0.1', 6379, 3 ...

  5. SpringBoot Profiles特性

    今天我们了解SpringBoot Profiles特性 一.外部化配置  配置分为编译时和运行时,而Spring采用后者,在工作中有时也会两者一起使用.  何为"外部化配置"官方没 ...

  6. laravel 语言包拓展

    laravel 使用make:auth生成用户认证,登录表单是英文版本的,打开模板文件(resources/views/auth/login.blade.php),此模板文件是我们刚刚使用 make: ...

  7. Python：数值类型

    数值类型的组成 数值类型可以直接使用的有:整数.浮点数.复数 Python3的整型,可以自动调整大小,当做long使用 整数 int 整数的进制表示 表示形式: 二进制:0b... 八进制:0o... ...

  8. 创业学习---《预判项目的长期壁垒》--B-3.预判模块---HHR计划---以太一堂

    一,<开始学习> 1,投资人经常会问CEO:你的项目的长期壁垒是什么?你是怎么思考的? 2,三个预热思考题: (1)突然有一天,大公司要抄你,你会怎么办?  答:用增长技术来和他竞争. ( ...

  9. leetcode 0211

    目录 ✅ 1217. 玩筹码 描述 解答 c java py ✅ 206. 反转链表 描述 解答 c java py ✅ 922. 按奇偶排序数组 II 描述 解答 c 双指针soldier tddo ...

  10. 水平居中显示CSS

    HTML代码部分 <div class="center" > <img style="margin:0 auto ;" :src=item.i ...