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. 在ubuntu16编译安装nginx-1.10.2（full）完全自带组件

    第一步:先安装全部用到的包 apt install gcc libpcre++-dev libssl-dev make \ libxml2-dev libxslt-dev libgd-dev libg ...

  2. In和Out指令

    In和Out OUT 0FAH,AL(它是指从AL中输出一个字节到0FAH的一个端口吗?) OUT DX,AL   OUT 0FAH,AX(AX是一个字为什么也能输出到0FAH所指的8位端口中呢?) ...

  3. PHP获取具有相同name的多个input表单信息

    首先是表单应该这样写,注意每个 name="name[]"后面是有一个方括号的.这是PHP特有的获取具有相同name的多个input元素value的方法.(复选框也是采用这种方法) ...

  4. Linux网络栈下两层实现

    http://www.cnblogs.com/zmkeil/archive/2013/04/18/3029339.html 1.1简介 VLAN是网络栈的一个附加功能,且位于下两层.首先来学习Linu ...

  5. 解决root用户ssh配置无密码登陆/hadoop用户照仿可以实现相同功能:hadoop用户登录并且把命令的所有root换成home/hadoop

    http://inuyasha1027.blog.51cto.com/4003695/1132896/ 主机ip:192.168.163.100(hostname: node0) ssh无密码登陆的远 ...

  6. Python 字符串分割的方法

    在平时工作的时候,发现对于字符串分割的方法用的比较多,下面对分割字符串方法进行总结一下:第一种:split()函数split()函数应该说是分割字符串使用最多的函数用法:str.split('分割符' ...

  7. iazq更新网址

    [版本:1.1] [介绍:哈哈(ಡωಡ)hiahiahia 新版软件试试去和哥哥刚放学噢噢噢天然呆翡翠城] [链接:http://info.3g.qq.com/g/s?aid=index&g_ ...

  8. xcode8 上传ipa文件无法构建版本

    在xcode8 升级后上传ipa文件 需要设置一个安全提示,现在上传app store的方式为xcode或者 application loader 一.xcode 准备工作完成后点击Product-- ...

  9. 使用spring的特殊bean完成配置

    1.分散配置 beans.xml配置如下: 使用占位符变量代替bean装配文件中的硬编码配置.占位符采用${variable}形式. 说明:当通过context:property-placeholde ...

  10. 文件消息的简单样式demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...