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. poj 2761 Feed the dogs (treap树)

    /************************************************************* 题目: Feed the dogs(poj 2761) 链接: http: ...

  2. android创建桌面快捷方式(启动目标非项目的启动页)

    1.布局文件中,目标Activity加入以下filter <intent-filter>                  <action android:name="an ...

  3. grunt配置太复杂？发布一个前端构建工具，简单高效，自动跳过未更新的文件

    做前端项目,如果没有一个自动化构建工具,手动处理那简直就是坑爹O(∩_∩)O.于是上网了解了下,grunt用的人不少,功能也挺强大.看了一下grunt的配置(包括gulp),感觉稍显复杂.当时项目结构 ...

  4. IIS 7 的 500 內部錯誤

    印象中這個有名的錯誤提示從 ASP 時代就已經存在 不是很明白微軟怎麼想的 你們所面對的客戶族群有為數不少的開發人員 除錯環境對開發者來說算是基本配備 為何不把這些相關設定做成「出廠預設值」? 都幾年 ...

  5. 【摘】BPMN2.0-概要

    BPMN2.0-概要   原文地址:http://www.uml.org.cn/workclass/201206272.asp 作者:AliKevin2011,发布于2012-6-27   一.BPM ...

  6. PHP 之 this self parent static 对比

    this 绑定的是当前已经实例化的对象 这样长出现的问题: 如果你在一个父类中使用$this调用当前一个类的方法或者属性,如果这个类被继承,且在相应的子类中有调用的属性或者方法是,则父类中的$this ...

  7. .Net MVC+bootstrap Table学习

    一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...

  8. MYSQL使用mysqldump导出某个表的部分数据

    命令格式如下: mysqldump -u用户名 -p密码 数据库名 表名 --where="筛选条件" > 导出文件路径 例子: 从meteo数据库的sdata表中导出sen ...

  9. unity 实现物体破碎效果的一些方法

    游戏越来越接近现实的感觉,如果有一个真是的 虚拟现实设备,可能我们真的会感觉是在真实世界.场景的逼真是在渲染效果.角色AI.游戏逻辑.物理效果等等一起导致的结果.现在游戏越来越大,除了渲染,物理估计是 ...

  10. 慕课网Java高并发秒杀学习

    课程地址:http://www.imooc.com/learn/587 一个很好:spring,springMVC,mybatis,bootstrap,jQuery,mysql,Restful学习案例 ...