这个是自己修改的轮播图片，在网上有的是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. 记录bug的贴子

    这个贴子用来记录一些,平时关注新闻,暴露出来的bug,引以为戒. 2019/01/21 - 拼多多出现大量100元无门槛券 关键词: 风险控制:羊毛党: https://www.zhihu.com/q ...

  2. 开发工具-RSA加解密

    更新日志 2022年6月10日 初始化链接. https://toolb.cn/rsa

  3. 26.MySQL数据库基础

    MySQL数据库基础 目录 MySQL数据库基础 数据库的概念 数据 表 数据库 数据库的管理系(DBMS) 数据库系统 访问数据库的流程 数据库系统发展史 当今主流数据库介绍 关系数据库 关系数据库 ...

  4. 实现领域驱动设计 - 使用ABP框架 - 创建实体

    用例演示 - 创建实体 本节将演示一些示例用例并讨论可选场景. 创建实体 从实体/聚合根类创建对象是实体生命周期的第一步.聚合/聚合根规则和最佳实践部分建议为Entity类创建一个主构造函数,以保证创 ...

  5. python各种BUG报错解决

    报错1 python学习交流群:660193417### Could not build atari-py: Command '['cmake', '..']' returned non-zero e ...

  6. vmstate 命令详解2022

    vmstat 是一个查看虚拟内存(Virtual Memory)使用状况的工具,但是怎样通过 vmstat 来发现系统中的瓶颈呢? 1. 使用vmstat 使用前我们先看下命令介绍及参数定义 Usag ...

  7. 这样优化Spring Boot，启动速度快到飞起!

    微服务用到一时爽,没用好就呵呵啦,特别是对于服务拆分没有把控好业务边界.拆分粒度过大等问题,某些 Spring Boot 启动速度太慢了,可能你也会有这种体验,这里将探索一下关于 Spring Boo ...

  8. Git上传仓库

    上传代码到gitee 方法1 1. 将远程仓库克隆到本地 git clone https://gitee.com/abc/aaa.git 2. 添加或修改本地文件 3. 将本地代码push到远程仓库 ...

  9. Modbus转OPC

    在这里给大家介绍一种低成本的将Modbus RTU协议的串口设备接入到OPC UA的服务器呢? OPC全称是OLE(Object Linking and Embedding) for Process ...

  10. Redis常见数据类型

    String 常用命令: get.set.incr.decr mget等操作,普通的key/value存储都可以归为此类 Hash 常用命令: hget,hset,hgetall 等. List(队列 ...