js实现图片无缝轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现图片无缝轮播</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
.b2{
width: 200px;
height: 200px;
margin: 44px auto 0;
position: relative;
overflow: hidden;
background-color: gray;
}
.b2 .b2list{
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.b2 .item{
width: 200px;
height: 200px;
float: left;
}
.b2 .item:nth-child(1) {
background-image: url("https://ximg.2cq.com/img/system/ad/tieba/7665cfeb1b50e560693509b7a4045861.jpeg");
background-size: 200px 200px;
}
.b2 .item:nth-child(2){
background-image: url("https://ximg.2cq.com/img/system/ad/tieba/ee34f88f37b317849cc0e80076b89bab.jpeg");
background-size: 200px 200px;
}
.b2 .item:nth-child(3){
background-image: url("https://ximg.2cq.com/img/system/ad/tieba/1c9b819f1b9ede319e8e1b8ba63066e8.jpeg");
background-size: 200px 200px;
}
</style>
<body>
<div class="b2">
<div class="b2list" data="0">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
<script>
$(function(){
setInterval("auto_left_me();",3000);
});
function auto_left_me(){
var num = $(".b2 .b2list").attr("data");
num++; if(num>2){
num=0;
}
$(".b2 .b2list").attr("data",num);
$('.b2 .b2list').animate({'left':-200*num});
} </script>
</body>
</html>
js实现图片无缝轮播的更多相关文章
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- jQuery图片无缝轮播插件;
图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...
- js插件-图片椭圆轮播效果
插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- HTML与W3C
HTML:超文本标记语言 超文本包括:文字.图片.音频.视频.动画等 流程:写好HTML代码后通过浏览器(自动编译HTML代码)展现出效果 HTML优点: 世界知名浏览器厂商对HTML5的支持 微软 ...
- 深入浅出Mybatis系列二-配置简介(mybatis源码篇)
注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, ...
- jQuery---固定导航栏案例
固定导航栏案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- ubuntu设置ulimit
centos系统的设置ulimit的时候是直接修改/etc/security/limits.conf文件,但是在ubuntu中却不行, ubuntu先修改/etc/security/limits.co ...
- CSS:display:none的使用注意事项
总结:display:none 属性会使元素完全隐藏,js无法获得元素,通过js设置style.display="inline-block" 后 js才可获得此元素的属性和内容 ...
- git内容补充-Git零基础快速入门-苏玲
https://git-scm.com/book/zh/v2 git历史 集中式版本控制管理:cvs.svn 分布式版本控制管理:git 基本命令 git config --list --global ...
- 在vue项目中设置BASE_URL
在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...
- CSS一些特殊图形
CSS一些特殊图形 CSS绘制三角形 通过控制元素的border属性可以实现三角形效果; 首先来设置4个边框, 为50px solid [color] color设置成不同的颜色值看一下效果 < ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- eclipse怎么debug项目
1.打断点,服务器debug启动 2.debug:打断点,加项目.f5:进入方法 f6:下一行代码 f8:执行到下一个断点处