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实现页面图片轮播的更多相关文章

  1. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  2. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. JQuery插件开发初探——图片轮播

    在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...

  5. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  6. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  7. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  8. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  9. jquery视频展示 图片轮播

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

随机推荐

  1. poj 2392 建塔（多重背包+不定上界）

    http://blog.csdn.net/libin56842/article/details/9492351 这次比较理解那个!dp[j]是为了什么,因为是滚动数组,没有这个的话used那边会出问题 ...

  2. Python-约束和异常处理

    今天我们来说一说类的规范以及程序出现错误后我们要怎么进行处理 一.类的约束 首先,你要清楚,约束是对类的约束,比如,现在你是一个项目经理,然后呢,你给手下的人分活,张三你处理一下普通用户登录,李四你处 ...

  3. Oracle中的索引详解(转载)

    一. ROWID的概念 存储了row在数据文件中的具体位置:64位 编码的数据,A-Z, a-z, 0-9, +, 和 /, row在数据块中的存储方式 SELECT ROWID, last_name ...

  4. 在URL里传入数组到HTML 里。

    需求 静态页面根据URL输入,动态显示图表满足如下两个条件. 1. 隐藏指定的行 2. 设定初始显示的Check box 需要的部分被打勾 实现 1. 创建一个静态的页面, <table id= ...

  5. 01_dubbo实例_服务分组

    [为什么要服务分组?] 当一个接口有多种实现时,可以用group区分. [ Provider 的配置信息] <?xml version="1.0" encoding=&quo ...

  6. TE7下的创建组件AxHost失败

    问题比较诡异.时好时坏的.网上的办法试过了,没用. 最后的解决办法是,把项目属性切换到Any CPU,然后勾选 32位优先,切换到界面设计状态,拖放控件,OK:运行,会出现红色提示:再次切换到项目属性 ...

  7. Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)

    背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...

  8. 一张图看懂CSS cascade, specific, importance, inheritance

    http://www.w3.org/TR/CSS21/cascade.html#inheritance http://www.w3.org/TR/CSS21/cascade.html#cascade ...

  9. SQL Server ->> PARSE函数

    这个函数和TRY_PARSE一起从SQL Server 2012引入.它的存在是因为TRY_PARSE一旦遇到无法成功转换就会以NULL值返回,而如果你希望以报错的形式,你就可以用PARSE. 比如 ...

  10. fork: retry: Resource temporarily unavailable

    用户A打开文件描述符太多,超过了该用户的限制 修改用户可以打开的文件描述符数量 1.首先,用另一个用户B登录,修改/etc/security/limit.conf * soft nofile 6553 ...