html：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="../css/test2.css">

<script type="text/javascript" src="../js/test2.js"></script>

<title>图片轮播</title>

</head>

<body onload="onPageLoaded()">

     <div class="s1">

        <div class="s2"><img src="../img/left.png" onclick="goLeftClick()"></img></div>

        <div class="s3"><img src="../img/right.png" onclick="goRightClick()"></img></div>

         <ul id="imgList" >

                      <li > <img  src="../img/img1.jpg"></img></li>

                      <li > <img src="../img/img2.jpg"></img></li>

                       <li > <img  src="../img/img3.jpg"></img></li>

                       <li > <img  src="../img/img4.jpg"></img></li>

         </ul>

     </div>

</body>

</html>

css：

@CHARSET "UTF-8";

body{

    width:950px;

    height:800px;

    background-color: silver;

    margin: 0 auto;

    border:1px solid red;

}

.s1{

    width:950px;

    height:250px;

    margin-top: 100px;

    background-color: orange;

    position:relative; /* 先将外面的div定位 */

    left:;

    top:;

    overflow: hidden;/* 自动隐藏超出的内容 */

}

.s2{

    /* background-color: blue;*/

     position:absolute;/* 再将里面的左右导航div定位 */

     left:30px;

     top:93px;

     z-index:;

}

.s3{

    /* background-color: blue;*/

     position:absolute;

     left:856px;

     top:93px;

     z-index:;

}

/*图像ul */

.s1 ul{

    width:3800px; /* ul 宽度设置 所有图像的宽的总和 */

    height:250px;

    padding:;         /* padding 设置0 */

    margin:;        /* margin 设置0 */

    background-color: purple;

    overflow: hidden; /* 自动隐藏超出的内容 */

}

.s1 ul > li{

     width:950px;

     list-style-type: none;

     float: left;

}

.s1 ul img{

    width:950px;

    height:250px;

    /*max-width: 100%;*/

}

javascript：

/**

 *  @description:

 *  @author Chenchen Yu

 *  @date 2016年11月23日

 *  @time 下午9:01:21

 */

 var k=0;

 var imgNum=4;//图片数目

 var imgWidth=950;

 function onPageLoaded(){

     setTimeout('goLeft()',2000);

 }

 //自动向左滑动图片

function goLeft(){

      var imgList=document.getElementById('imgList');

      marginLeft=-((k+1)%imgNum)*imgWidth;

      if(marginLeft==0)

          {      

            imgList.style.marginLeft='0px';

            k++;

            setTimeout('goLeft()',2000);

            return;

          }

         slideLeft(imgList,marginLeft+imgWidth,marginLeft);

     // k++;

}

function slideLeft(imgList,start,marginLeft){

    //模拟滑动

    //var start=marginLeft+950;

    setTimeout('slideLeftByStep('+'imgList'+','+start+','+marginLeft+')',10);

}

function slideLeftByStep(imgList,dis,marginLeft){

    if(dis<marginLeft)

        {

          k++;

          setTimeout('goLeft()',2000);

          return;

        }

      imgList.style.marginLeft=dis+'px';

      dis=dis-50;//step size

      slideLeft(imgList,dis,marginLeft);

}

//点击向右滑动图片

function goRightClick(){

     var imgList=document.getElementById('imgList');

     if(k<=0||(k)%imgNum==0)

         {

          // imgList.style.marginLeft='0px';

           k=0;

           return;

         }

     k=k-2;//后退

     marginLeft=-((k+1)%imgNum)*imgWidth;

     clickSlideRight(imgList,marginLeft-imgWidth,marginLeft);

     console.log('kk',marginLeft);

//     imgList.style.marginLeft='0px';

}

function clickSlideRight(imgList,start,marginLeft){

    setTimeout('clickSlideRightByStep('+'imgList'+','+start+','+marginLeft+')',5);

}

function clickSlideRightByStep(imgList,dis,marginLeft){

    if(dis>marginLeft)

    {

      k++; //

      return;

    }

    imgList.style.marginLeft=dis+'px';

    dis=dis+50;//step size

    clickSlideRight(imgList,dis,marginLeft);

}

//点击向左滑动图片

function goLeftClick(){

     var imgList=document.getElementById('imgList');

     if((k+1)%imgNum==0)

         {

           k=0;

           return;

         }

     marginLeft=-((k+1)%imgNum)*imgWidth;

     clickSlideLeft(imgList,marginLeft+imgWidth,marginLeft);

}

function clickSlideLeft(imgList,start,marginLeft){

    setTimeout('clickSlideLeftByStep('+'imgList'+','+start+','+marginLeft+')',5);

}

function clickSlideLeftByStep(imgList,dis,marginLeft){

    if(dis<marginLeft)

    {

      k++;//保持自动滑动同步

      return;

    }

    imgList.style.marginLeft=dis+'px';

    dis=dis-50;//step size

    clickSlideLeft(imgList,dis,marginLeft);

}

效果图：

html+css+javascript实现简易轮播图片的更多相关文章

  1. 用CSS代码编写简易轮播图

    废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...

  2. 简单html js css 轮播图片，不用jquery

    这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

  5. HTML练习二--动态加载轮播图片

    接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...

  6. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  7. 轮播图片 高效图片轮播，两个imageView实现

    该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...

  8. 微信小程序轮播图组件 swiper，swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  9. APP动态加载轮播图片

    如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...

随机推荐

  1. WebService基本概念及原理

    一.Web Service基本概念 WebService是一种跨编程语言和跨操作系统平台的远程调用技术.Web Service也叫XML Web Service WebService是一种可以接收从I ...

  2. AndroidStudio关联svn并上传代码到svn服务器上

    打开AndroidStudio,按Ctrl+Shif+S快捷键,进入Settings设置页面.如上图所示,找到Version Control->点击Subversion->右边框口中勾选U ...

  3. 《Reactive_MircService_Architecture》 脑图

    Reactive_MircService_Architecture Lightbend CTO的50页的小册子,对响应式系统以及微服务架构介绍非常全面,整理了一个脑图来先.

  4. textArea 高度自适应

    <textarea name="apparatus" class="dhxTextArea" style="width:100%;height: ...

  5. mssql

    1.打开php.ini,将 ;extension=php_mssql.dll前面的分号(;)去掉,然后重启 Apache. 如果不行的话,进行第2步: 2.检查一下你的php安装目录下的ext下面有没 ...

  6. 九月二十八JS验证

    js表单验证 js可用发来在数据被送往服务器前对HTML表单中的这些输入数据进行验证 被js验证的这些典型的表单数据有: >用户是否已填写表单中的必填项目: >用户输入的邮件地址是否是合法 ...

  7. HTML5.dcloud.io-stream-app

    dcloud.io提出的Stream App 本文仅仅是关于dcloud.io提出的SteamApp初探,所有内容请参考其官网. 1. Application promotion by scaning ...

  8. Daily Scrum 12.14

    今日完成任务: 优化了问题页面显示问题的算法:两名开发人员有CCF考试,今天没有完成任务,任务顺延到明天. 明日任务: 黎柱金 解决资源显示全部为同一个PDF的BUG 晏旭瑞 资源搜索问题 孙思权 做 ...

  9. Linux下GDB调试

    GDB 是一个强大的命令行调试工具.大家知道命令行的强大就是在于,其可以形成执行 序列,形成脚本.UNIX 下的软件全是命令行的,这给程序开发提供了极大的便利,命令行 软件的优势在于, 他们可以非常容 ...

  10. spring知识大全（4）

    5 Spring对事务的支持 一.AOP事务的含义: 事务当作一个切面,动态地织入到目标对象,形成一个代理对象. 二.Spring的事务机制 Spring支持声明式事务. Spring使用事务服务代理 ...