html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" type="text/css" href="../css/test2.css">
  6. <script type="text/javascript" src="../js/test2.js"></script>
  7. <title>图片轮播</title>
  8. </head>
  9. <body onload="onPageLoaded()">
  10. <div class="s1">
  11. <div class="s2"><img src="../img/left.png" onclick="goLeftClick()"></img></div>
  12. <div class="s3"><img src="../img/right.png" onclick="goRightClick()"></img></div>
  13.  
  14. <ul id="imgList" >
  15. <li > <img src="../img/img1.jpg"></img></li>
  16. <li > <img src="../img/img2.jpg"></img></li>
  17. <li > <img src="../img/img3.jpg"></img></li>
  18. <li > <img src="../img/img4.jpg"></img></li>
  19. </ul>
  20.  
  21. </div>
  22. </body>
  23. </html>

css:

  1. @CHARSET "UTF-8";
  2.  
  3. body{
  4.  
  5. width:950px;
  6. height:800px;
  7. background-color: silver;
  8. margin: 0 auto;
  9. border:1px solid red;
  10. }
  11.  
  12. .s1{
  13. width:950px;
  14. height:250px;
  15. margin-top: 100px;
  16. background-color: orange;
  17. position:relative; /* 先将外面的div定位 */
  18. left:;
  19. top:;
  20. overflow: hidden;/* 自动隐藏超出的内容 */
  21.  
  22. }
  23.  
  24. .s2{
  25. /* background-color: blue;*/
  26.  
  27. position:absolute;/* 再将里面的左右导航div定位 */
  28. left:30px;
  29. top:93px;
  30. z-index:;
  31. }
  32. .s3{
  33. /* background-color: blue;*/
  34. position:absolute;
  35. left:856px;
  36. top:93px;
  37. z-index:;
  38. }
  39.  
  40. /*图像ul */
  41. .s1 ul{
  42. width:3800px; /* ul 宽度设置 所有图像的宽的总和 */
  43. height:250px;
  44. padding:; /* padding 设置0 */
  45. margin:; /* margin 设置0 */
  46. background-color: purple;
  47. overflow: hidden; /* 自动隐藏超出的内容 */
  48.  
  49. }
  50.  
  51. .s1 ul > li{
  52. width:950px;
  53. list-style-type: none;
  54. float: left;
  55. }
  56. .s1 ul img{
  57. width:950px;
  58. height:250px;
  59. /*max-width: 100%;*/
  60. }

javascript:

  1. /**
  2. * @description:
  3. * @author Chenchen Yu
  4. * @date 2016年11月23日
  5. * @time 下午9:01:21
  6. */
  7.  
  8. var k=0;
  9. var imgNum=4;//图片数目
  10. var imgWidth=950;
  11. function onPageLoaded(){
  12.  
  13. setTimeout('goLeft()',2000);
  14.  
  15. }
  16.  
  17. //自动向左滑动图片
  18. function goLeft(){
  19.  
  20. var imgList=document.getElementById('imgList');
  21. marginLeft=-((k+1)%imgNum)*imgWidth;
  22. if(marginLeft==0)
  23. {
  24.  
  25. imgList.style.marginLeft='0px';
  26. k++;
  27. setTimeout('goLeft()',2000);
  28. return;
  29. }
  30. slideLeft(imgList,marginLeft+imgWidth,marginLeft);
  31. // k++;
  32. }
  33.  
  34. function slideLeft(imgList,start,marginLeft){
  35. //模拟滑动
  36. //var start=marginLeft+950;
  37. setTimeout('slideLeftByStep('+'imgList'+','+start+','+marginLeft+')',10);
  38.  
  39. }
  40.  
  41. function slideLeftByStep(imgList,dis,marginLeft){
  42. if(dis<marginLeft)
  43. {
  44. k++;
  45. setTimeout('goLeft()',2000);
  46. return;
  47. }
  48. imgList.style.marginLeft=dis+'px';
  49.  
  50. dis=dis-50;//step size
  51. slideLeft(imgList,dis,marginLeft);
  52. }
  53. //点击向右滑动图片
  54. function goRightClick(){
  55. var imgList=document.getElementById('imgList');
  56.  
  57. if(k<=0||(k)%imgNum==0)
  58. {
  59. // imgList.style.marginLeft='0px';
  60. k=0;
  61. return;
  62. }
  63. k=k-2;//后退
  64.  
  65. marginLeft=-((k+1)%imgNum)*imgWidth;
  66. clickSlideRight(imgList,marginLeft-imgWidth,marginLeft);
  67. console.log('kk',marginLeft);
  68. // imgList.style.marginLeft='0px';
  69. }
  70.  
  71. function clickSlideRight(imgList,start,marginLeft){
  72.  
  73. setTimeout('clickSlideRightByStep('+'imgList'+','+start+','+marginLeft+')',5);
  74.  
  75. }
  76.  
  77. function clickSlideRightByStep(imgList,dis,marginLeft){
  78. if(dis>marginLeft)
  79. {
  80. k++; //
  81. return;
  82. }
  83. imgList.style.marginLeft=dis+'px';
  84. dis=dis+50;//step size
  85. clickSlideRight(imgList,dis,marginLeft);
  86. }
  87.  
  88. //点击向左滑动图片
  89. function goLeftClick(){
  90. var imgList=document.getElementById('imgList');
  91. if((k+1)%imgNum==0)
  92. {
  93. k=0;
  94. return;
  95. }
  96. marginLeft=-((k+1)%imgNum)*imgWidth;
  97. clickSlideLeft(imgList,marginLeft+imgWidth,marginLeft);
  98. }
  99.  
  100. function clickSlideLeft(imgList,start,marginLeft){
  101.  
  102. setTimeout('clickSlideLeftByStep('+'imgList'+','+start+','+marginLeft+')',5);
  103.  
  104. }
  105.  
  106. function clickSlideLeftByStep(imgList,dis,marginLeft){
  107. if(dis<marginLeft)
  108. {
  109. k++;//保持自动滑动同步
  110. return;
  111. }
  112. imgList.style.marginLeft=dis+'px';
  113. dis=dis-50;//step size
  114. clickSlideLeft(imgList,dis,marginLeft);
  115. }

效果图:

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. MVC后台数据赋值给前端JS对象

    Controller中的数据,不管是使用的是ViewModel 还是ViewBag.Data,要将他传递到View中,这个很容易,但是如果要将它传递给JS中的某个对象,这个改如何处理呢? 后台的数据格 ...

  2. 记一次TFS 的 垃圾提示(无法下载 未获取项目 的 代码)

    提示 “ 所有文件都是最新的 ”,但是在 源码管理 里面 确是 “未下载” 我艹,第一次遇到.如图.~~ 最后发现是 TFS 的项目权限设置问题. 你妈个马批的,啥子鸡巴破B提示,太阳你妈B 的 .要 ...

  3. android端,webview内url跳转到app本地

    这是和一个前端同事沟通. app内嵌入他的web页,要通过web页内的url跳转到app的详细内容. 他的android同事,没有思路. 其实嵌入web页,用的webview控件,只要能找到webvi ...

  4. NES模拟器开发-PPU笔记

    20151008 占坑,暂时没弄清楚PPU数据如何初始化,绘制顺序等.

  5. #include <cstdio>

    #include <cstdio> using namespace std; int main() { int gx; gx=6; printf("%d\n",gx); ...

  6. OOP之C#设计及其UML(反向工程)

    现在总结一下C#类关键字(virtual.abstract.override.new.sealed)的使用(以C#代码体现),并再次熟悉一下OOP思想,使用UML工具EA(Enterprise Arc ...

  7. 安装pillow错误的解决方案

    错误信息: ValueError: jpeg is required unless explicitly disabled using --disable-jpeg, aborting        ...

  8. 关于KB905474正版验证补丁破解办法 KB905474是个微软操作系统正版/盗版监测间谍软件。更新安装后,右下角有个提示说“系统监测到你的操作系统是盗版”。 如果没有安装的: 在系统提示更新的时候注意看一下,如果包含有“更新KB905474”就去掉“更新KB905474”方框前的勾,点击关闭(注意如果没有去掉那个勾得话,会找不到“关闭”,而是“确定”),在不在提示我该消息前打勾。 如果已经安装

    关于KB905474正版验证补丁破解办法 KB905474是个微软操作系统正版/盗版监测间谍软件.更新安装后,右下角有个提示说“系统监测到你的操作系统是盗版”. 如果没有安装的: 在系统提示更新的时候 ...

  9. .net mvc 扩展IPrincipal接口

    .自定义实现IPrincipal接口的类 interface ICustomPrincipal : IPrincipal { string Identifier { get; set; } strin ...

  10. 推荐有料哥:HR社保公积金状况大揭底

    昨天下午有料哥和几位三茅运营成员一起和大家进行三个小时的面对面,如潮的问题让几位三茅团队成员都措手不及了,有料哥也融入了大家紧张好奇问题的好奇,无奈水平有限不能很好回复,请大家谅解,有问题还可以在有料 ...