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. des加密解密——java加密，php解密

    最近在做项目中,遇到des加密解密的问题. 场景是安卓app端用des加密,php这边需要解密.之前没有接触过des这种加密解密算法,但想着肯定会有demo.因此百度,搜了代码来用.网上代码也是鱼龙混 ...

  2. 清除oracle中的缓存(具体细节未知, 慎用)

    oracle中的缓存主要是指SGA中的:1.share pool2.database buffer cache清空命令如下:首先要登录到sqlplus命令下,输入如下命令即可:SQL> alte ...

  3. 使用selenium控制滚动条（非整屏body）

    方法原理:     (1)使用jQuery CSS 操作 - scrollTop() 方法,设置 <div> 元素中滚动条的垂直偏移,语法:$(selector).scrollTop(of ...

  4. OA及权限系统

    一直想找一款适合自己的权限管理后台,始终都没找到合适的,决定自己写一个 开发环境:vs2012 ,sql2008 语言:C# 前端:ligurui,jquery ORM框架:EF6.0 先来晒下我的数 ...

  5. css例子

    6.背景图像渐变的制作body{ background:#ccc url(xxx.gif)rpeat-x或y:} 7.给一个区块加上背景#branding{ width:700px: height:2 ...

  6. SQL server 动态行转列

    用聚合函数配合CASE语句实现行转列功能: 现在分享一下具体实现代码: 转换前效果: PlanName PlanType PlanLimit 计划1 计划类型1 RMB 1,000,000 计划1 计 ...

  7. Shell--用户配置

    vim /etc/profileexport PS1='\[\e[1;33m\]\h\[\e[m\] \t [\[\e[1;36m\]\w\[\e[m\]] [\u] '   export LANG= ...

  8. 深入研究C语言 第三篇

    本篇研究TC2.0下其他几个工具.同时看看TC由源代码到exe程序的过程. 1. 用TCC将下面的程序编为.obj文件 我们知道,TCC在默认的编译连接一个C语言的源程序a.c的时候分为以下两步: ( ...

  9. Quartz.Net与MVC结合定时任务

    1.首先,我们打开Visual Studio 2015,创建一个ASP.NET MVC的Web应用程序项目. 2.然后通过程序包管理器控制台来安装Quartz.Net组件. Quartz.Net一个最 ...

  10. java-base64编码和解码

    一.反射/*** * encode by Base64 */ public static String encodeBase64(byte[]input) throws Exception{ Clas ...