<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/jquery-1.7.2.js"></script>
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;} #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
.imgList li{float:left;display: inline;}
#prev,
#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
.infoList li{display: none;}
.infoList .infoOn{display: inline;color: white;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
<div id="wrapper">
<!-- 最外层部分 -->
<div id="banner">
<!-- 轮播部分 -->
<ul class="imgList">
<!-- 图片部分 -->
<li><a href="#"><img src="../images/1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
<li><a href="#"><img src="../images/2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
<li><a href="#"><img src="../images/3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
<li><a href="#"><img src="../images/4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
<li><a href="#"><img src="../images/5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
</ul>
<img src="../images/qianxleft1.png" width="20px" height="40px" id="prev">
<img src="../images/qianxr1.png" width="20px" height="40px" id="next">
<div class="bg"></div> <!-- 图片底部背景层部分-->
<ul class="infoList">
<!-- 图片左下角文字信息部分 -->
<li class="infoOn">puss in boots1</li>
<li>puss in boots2</li>
<li>puss in boots3</li>
<li>puss in boots4</li>
<li>puss in boots5</li>
</ul>
<ul class="indexList">
<!-- 图片右下角序号部分 -->
<li class="indexOn">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script src="../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var curIndex = 0,//当前index
imgLen = $(".imgList li").length;//图片总数
var autoChange = setInterval(function () {
if (curIndex < imgLen - 1) {
curIndex++;
} else {
curIndex = 0;
}
changeTo(curIndex);
}, 2500);
//左箭头事件
$("#prev").hover(function () {
clearInterval(autoChange);//滑入定时器清除;
}, function () {
autoChangeAgain();
});
$("#prev").click(function () {
//根据curIndex处理上一张图片
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
});
//右箭头滑入事件
$("#next").hover(function () {
//滑入清除定时器
clearInterval(autoChange);
}, function () {
autoChangeAgain();
});
//右箭头点击处理事件
$("#next").click(function () {
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
});
//清除定时器时候的重置定时器--封装
function autoChangeAgain() {
autoChange = setInterval(function () {
if (curIndex < imgLen - 1) {
curIndex++;
} else {
curIndex = 0;
}
//调用变换处理函数
changeTo(curIndex);
}, 2500);
}
function changeTo(num) {
var goLeft = num * 400;
$(".imgList").animate({ left: "-" + goLeft + "px" }, 500);
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
//对右下角按钮index进行事件绑定处理等
$(".indexList").find("li").each(function (item) {
$(this).hover(function () {
clearInterval(autoChange);
changeTo(item);
curIndex = item;
}, function () {
autoChangeAgain();
});
});
</script>
</body>

原生JQ实现图片滑动轮播的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. jq实现图片轮播:圆形焦点+左右控制+自动轮播

    来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  3. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  4. 原生Js_简易图片轮播模板

    功能:图片自动循环轮播,通过点击“上一张”,“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta chars ...

  5. 原生Javascript实现图片轮播效果

    首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...

  6. 原生JS实现图片轮播

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

  7. JQ简单图片轮播

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

  8. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  9. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

  1. mysql 清空表的两种方法

    一.Delete DELETE FROM `table`; 二.Truncate TRUNCATE `table`; 第一种方法其实就是去掉where条件,没有了条件,也就是删除掉表里面的所有记录了: ...

  2. Bzoj-2190 仪仗队 欧拉函数

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2190 简单的欧拉函数题,实际上就是求gcd(x,y)=1, 0<=x,y<=n ...

  3. ubuntukylin提取root权限及mongoDB部署

    UbuntuKylin下安装Mongodb (参照UbuntuKylin下安装Mongodb一文安装成功后的心得) 1.官网下载安装包  http://www.mongodb.org/dr/fastd ...

  4. Django中的Model(操作表)

    Model 操作表 一.基本操作 # 增 models.Tb1.objects.create(c1='xx', c2='oo') #增加一条数据,可以接受字典类型数据 **kwargs obj = m ...

  5. A Tour of Go Interfaces

    An interface type is defined by a set of methods. A value of interface type can hold any value that ...

  6. android http 通信(java原生类库实现)

    get方式 private void doGet(){ URL httpurl = new URl(url); HttpURLConnection conn = (HttpURLConnection) ...

  7. 低级错误之Hbm中类型不一致错误

    Myeclipse将数据库中的长整形生成为Bigdecimal类型,实际应该生成为Long.导致保存的时候报错.

  8. ECSHOP 数据库结构说明 (适用版本v2.7.3)

    ECSHOP 数据库结构说明 (适用版本v2.7.3) 1.account_log 用户账目日志表 字段 类型 Null/默认 注释 log_id mediumint(8) 否 / 自增 ID 号 u ...

  9. CodeIgniter网站静态化管理系统

    CodeIgniter本身带了一套静态化系统 使用方法如下: $this->output->cache( 3 );//每三分钟重新生成一次静态页面 不过这个在系统化的编辑中不方便管理 由此 ...

  10. Asp.Net Core- 多样性的配置来源

    我们知道,ConfigurationProvider提供将数据源转换为字典的功能,数据源可以分为很多种,比如:物理文件.数据库.内存变量等等.物理文件又包括很多种类型的文件,比如:xml.json等等 ...