jquery实现页面图片轮播
1、创建一个html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="jquery-3.2.1.js"></script>
<script>
$(function(){
var len=$("#div1 .img li").length;
var i=0;
//设置自动播放
//通过ul左移来实现
var t=setInterval(function(){
if(++i==len){
i=0;
}
$(".img").animate({left:-i*790},1000);
//设置原点变化
$(".controls li").eq(i).addClass("on").siblings().removeClass("on");
},1000);
//设置鼠标移入停止动画
$("#div1").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
if(++i==len){
i=0;
}
$(".img").animate({left:-i*790},1000);
$("#div1 .controls li").eq(i).addClass("on").siblings().removeClass("on");
},3000);
});
//设置鼠标点击左右键的事件
$(".left").click(function(){
var left=$(".img").css("left");
i=i-1;
//Number newleft=Nuber(left-790);
//$(".img").animate({left:newleft},500)；
$(".img").animate({left:-i*790},1000);
$("#div1 .controls li").eq(i).addClass("on").siblings().removeClass("on");
});
$(".right").click(function(){
var left=$(".img").css("left");
i=i+1;
//Number newleft=Nuber(left-790);
//$(".img").animate({left:newleft},500)；
$(".img").animate({left:-i*790},1000);
$("#div1 .controls li").eq(i).addClass("on").siblings().removeClass("on");
});
//设置原点的点击事件
$(".controls li").click(function(){
i=$(this).index();
$(".img").animate({left:-i*790},1000);
$("#div1 .controls li").eq(i).addClass("on").siblings().removeClass("on");
});
})
</script>
<style>
*{
margin:0;
padding:0;
}
#div1{
width: 790px;
height: 340px;
position: absolute;
overflow: hidden;
left: 230px;
top: 100px;
}
#div1 .img{
list-style: none;
height: 340px;
width:3500px;
position: absolute;
}
#div1 .img li{
list-style: none;
float: left;
}
#div1 .controls{
height: 30px;
width: 200px;
position: absolute;
left: 300px;
top: 320px;
}
/*将li变更成一个一个的圆点*/
.controls li{
height: 10px;
width: 10px;
list-style: none;
float: left;
border: 1px solid white;
background-color: white;
border-radius: 100%;
margin-left: 30px;
opacity: 60%;
}
/*图片显示第几张，li的background变为红色*/
.controls .on{
background-color: red;
}
/*左边键头*/
#div1 .left{
width: 20px;
height: 20px;
border-top: 5px solid white;
border-left: 5px solid white;
position: absolute;
left: 20px;
top:150px;
-webkit-transform:rotate(-45deg);
opacity: 30%;
}
/*右边边键头*/
#div1 .right{
width: 20px;
height: 20px;
border-top: 5px solid white;
border-right: 5px solid white;
position: absolute;
left: 740px;
top:150px;
-webkit-transform:rotate(45deg);
opacity: 30%;
}
</style>
<body>
<div id="div1">
<ul class="img">
<li><img src="图片路径" alt="" class="switch"></li>
<li><img src="图片路径" alt="" class="switch"></li>
<li><img src="图片路径" alt="" class="switch"></li>
<li><img src="图片路径" alt="" class="switch"></li>
</ul>
<!-- 左右键 -->
<span class="left"></span>
<span class="right"></span>
<!-- 圆点 -->
<ul class="controls">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
效果图：
jquery实现页面图片轮播的更多相关文章
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- JQuery插件开发初探——图片轮播
在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- jquery视频展示 图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- wget http://pypi.python.org/packages/source/s/setuptools/setuptools-2.0.tar.gz 下载时报错 ssl is required 解决办法
方法一:使用浏览器下载.在浏览器中输入 http://pypi.python.org/packages/source/s/setuptools/setuptools-2.0.tar.gz 方法二:将h ...
- 【转】js判断一个object对象是否为空
判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” for (var i in obj) { // 如果不为空 ...
- 浮动的补充丶文本和字体属性丶background丶定位
一丶浮动的补充 浮动的特性: 1. 浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有"字围"效果 4.浮动的元素有收缩的效果 前提是标准文档流,margin的垂直方向会出现 ...
- Java Struts2 （四）
一.contextMap中的数据操作 root根:List 元素1 元素2 元素3 元素4 元素5 contextMap:Map key value application Map key value ...
- Java Struts2 （一）
一.Struts2简介 1.Struts2概述 Struts2是Apache发行的MVC开源框架.注意:它只是表现层(MVC)框架. 2.Struts2的来历 Struts1:也是apache开发的一 ...
- ERROR:Tried to register widget id ==basemapGalleryDiv but that id is already registered解决办法
在ArcGIS Server开发中,遇到DIV已经被注册的情况,不能对原DIV内容进行更新.这里需要调用Dojo的destroyRecursive()方法,逐个销毁该Widget下的子元素及其后代元素 ...
- hdu 1102 Constructing Roads （Prim算法）
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1102 Constructing Roads Time Limit: 2000/1000 MS (Jav ...
- 申请单位iOS开发者账号
没有AppleID的需要先申请:此处略过: 1.登录苹果开发者官网(https://developer.apple.com),网速比较慢,多试几次 2. 点击 Enroll 切换到 简体中文 我以下述 ...
- KNN 与 K - Means 算法比较
KNN K-Means 1.分类算法 聚类算法 2.监督学习 非监督学习 3.数据类型:喂给它的数据集是带label的数据,已经是完全正确的数据 喂给它的数据集是无label的数据,是杂乱无章的,经过 ...
- 【Udacity】机器学习性能评估指标
评估指标 Evaluation metrics 机器学习性能评估指标 选择合适的指标 分类与回归的不同性能指标 分类的指标(准确率.精确率.召回率和 F 分数) 回归的指标(平均绝对误差和均方误差) ...