这个是自己修改的轮播图片，在网上有的是flash 实现的轮播图片，对搜索引擎不友好，

比如：dedecms 的首页的轮播图是用flash实现滚动的。

所以这个自己修改了一下，实现html+js+css 滚动图片，效果很好。

这里没有用到jquery ，感觉加载jquery 也耗时间，所以没有引用。速度快就是王道。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>js css 轮播</title>

<meta name="keywords" content="">

<meta name="description" content="">

<link href="css/gundong.css" type="text/css" rel="stylesheet"/>

</head>

<body>

   <!--gundong size: 280px * 192px -->

<div id="turn" class="turn">

	<div class="turn-loading"><img src="../images/loading_comment.gif" alt="loading"/></div>

	<ul class="turn-pic">

    	 <li><a href="http://ishuba.com.cn/article-221-1.html" target="_blank"  title="成大事者善沟通(高清)1" ><img src="data:images/1.jpg" width="280" height="192"    alt="成大事者善沟通(高清) pdf下载" /></a></li>

    	 <li><a href="http://ishuba.com.cn/article-221-1.html" target="_blank"  title="成大事者善沟通(高清)2" ><img src="data:images/1.jpg" width="280" height="192"    alt="成大事者善沟通(高清) pdf下载" /></a></li>

    	 <li><a href="http://ishuba.com.cn/article-221-1.html" target="_blank"  title="成大事者善沟通(高清)3" ><img src="data:images/1.jpg" width="280" height="192"    alt="成大事者善沟通(高清) pdf下载" /></a></li>

    </ul>

</div>

<script type="text/javascript" src="js/gundong.js"></script>

</body>

</html>

　　

效果图如下：

但有个不好的地方就是要2张图片以上，最少2张图片，不然滚动轮播的时候会有一个白块，这个是要注意的地方。

喜欢就拿去用在自己的项目吧。有什么问题也可以找我，随时交流。

点击这里下载：html js css 轮播图片   （访问密码：7509）

简单html js css 轮播图片，不用jquery的更多相关文章

  1. HTML练习二--动态加载轮播图片

    接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...

  2. 轮播图--使用原生js的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  5. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  6. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  7. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  8. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

随机推荐

  1. CabloyJS也有工作流引擎了，是你想要的吗？

    前言 众所周知,NodeJS作为后端开发语言和运行环境,样样都好,就差一个NodeJS工作流引擎.CabloyJS 4.0重点开发了NodeJS工作流引擎,并作为内置的基础核心模块,近一步拓展了Nod ...

  2. Spring cloud gateway 如何在路由时进行负载均衡

    本文为博主原创,转载请注明出处: 1.spring cloud gateway 配置路由 在网关模块的配置文件中配置路由: spring: cloud: gateway: routes: - id: ...

  3. Nginx下fastcgi_split_path_info导致CodeIgniter配置问题

    Nginx下fastcgi_split_path_info导致CodeIgniter配置问题   突然发最近又有点懒散了,很久没有写东西了!今天谈点关于不是什么很新的问题,在nginx下配置ci框架时 ...

  4. 开发工具-Java SDK下载地址

    更新记录 2022年6月14日 加入更多的下载地址. 2022年6月10日 完善标题. 下载地址: https://www.oracle.com/java/technologies/downloads ...

  5. .NetCore实现图片缩放与裁剪 - 基于ImageSharp

    前言 (突然发现断更有段时间了 最近在做博客的时候,需要实现一个类似Lorempixel.LoremPicsum这样的随机图片功能,图片有了,还需要一个根据输入的宽度高度获取图片的功能,由于之前处理图 ...

  6. 对互斥事件和条件概率的相互理解《考研概率论学习之我见》 -by zobol

    1.从条件概率来定义互斥和对立事件 2.互斥事件是独立事件吗? 3.每个样本点都可以看作是互斥事件,来重新看待条件概率 一.从条件概率来定义互斥和对立事件 根据古典概率-条件概率的定义,当在" ...

  7. crane：字典项与关联数据处理的新思路

    前言 在我们日常开发中,经常会遇到一些烦人的数据关联和转换问题,比如典型的: 对象属性中个有字典 id,需要获取对应字典值并填充到对象中: 对象属性中有个外键,需要关联查询对应的数据库表实体,并获取其 ...

  8. UiPath鼠标操作文本的介绍和使用

    一.鼠标(mouse)操作的介绍 模拟用户使用鼠标操作的一种行为,例如单击,双击,悬浮.根据作用对象的不同我们可以分为对元素的操作.对文本的操作和对图像的操作 二.鼠标对文本的操作在UiPath中的使 ...

  9. 浪姐打分看不够？用几行Python代码模拟评委打分

    大家好鸭~我是小熊猫比赛大家都看过吧,每次是不是都对比赛成绩充满期待.特别是浪姐的打分看的简直欲罢不能- 今天就用Python来模拟评委打分,这个案例很短也很简单,很适合新手跟小白练习. 在某次十佳歌 ...

  10. Python制作手游《和平精英》游戏资料查询助手

    写在前面的一些P话: <和平精英>这个游戏想必大家都玩过了,今天来教大家制作一个<和平精英>游戏的资料查询助手 受害者地址: https://gp.qq.com/main.sh ...