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. Finders Keepers

    function find(arr, func) { //var num = 0; //return num; var res = arr.filter(func); if(res.length){ ...

  2. Frameset 框架集 导航栏 的使用

    在index.jsp中 使用jsp标签转发到制定页面 <body> <jsp:forward page="/admin/frame.jsp"></js ...

  3. JVM常量池

    常量池(constant_pool)指的是在编译期被确定,并被保存在已编译的.class文件中的一些数据.它包括了关于类.方法.接口等中的常量,也包括字符串常量和符号引用.运行时常量池是方法区的一部分 ...

  4. M2事后分析汇报总结

    学霸网站项目Postmortem结果 M2之于M1的改进 文档和问答的整合 完成webservice 完成数据库触发器设计与完整性约束依赖(大规模) 优化学霸UI 资源的搜索 外部问题的搜索 文档的上 ...

  5. C1000k 新思路：用户态 TCP/IP 协议栈

    现在的服务器支撑上百万个并发 TCP 连接已经不是新闻(余锋2010年的演讲,ideawu 的 iComet 开源项目,WhatsApp 做到了 2.5M).实现 C1000k 的常规做法是调整内核参 ...

  6. Spring Boot项目的打包和部署

    补充一点:搜索了下别人Spring Boot部署方案,大多都说:①packaging设为war:②要添加Spring Boot的tomcat依赖:③修改output路径,但是使用STS新建Spring ...

  7. 清空stringbuilder

    大家知道对于字符串频繁拼接是使用stringbuilder.Append方法比使用string+=方法效率高很多,但有时需要清空stringbuilder时却不知道怎么清空,因为它没有clear或em ...

  8. js定义多行字符串

    js本身没有提供类似的定义方式,但是可以通过多行注释(/* */),已经借助function的方式来达到多行字符的定义,例如代码: var jstr = function() { var fun = ...

  9. MariaDB kill命令

    MariaDB的KILL命令不只可以杀掉连接,而且可以只杀掉某连接当前的SQL,而不断开连接.KILL QUERY thread_id;kill thread_id可以杀掉当前的连接,而kill QU ...

  10. 编辑器sublime text3和插件package control、Sidebar Enhancements插件安装

    (1)编辑器sublime text3的安装:选择自己需要的版本下载安装:http://www.sublimetext.com/3 (2)package control插件安装:https://pac ...