jQuery图片轮播功能实例代码


Posted in Javascript onJanuary 29, 2017

jquery 轮播图代码如下所示:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片轮播</title>
<style>
*{margin:0px;padding:0px;}
.one{
float:left;
position:relative;
left:0px;
top:0px;
margin-left:10px;
width:790px;
height:340px;
overflow:hidden;
}
.one ul li{
list-style:none;
}
.photo ul{
float:left;
position:absolute;
height:490px;
left:0px;
top:0px;
}
.photo ul li{
float:left;
padding:0px;
margin:0px;
}
.arrow span{
display:block;
position:absolute;
width:30px;
height:60px;
line-height:60px;
text-align:center;
background:rgba(0,0,0,0.2);
z-index:1;
font-size:20px;
color:#fff;
top:40%;
cursor:pointer;
display:none;
}
.arrow span:hover{
background:rgba(0,0,0,0.7);
}
.arrow .right{
right:0px;
}
.dot{
position:absolute;
z-index:!;
background:rgba(255,255,255,0.2);
font-size:26px;
bottom:15px;
left:300px;
border-radius:22px;
}
.dot ul{
margin:0px;
padding:0px;
}
.dot ul li{
float:left;
padding:0px;
margin:0px;
margin:0 5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="one">
<div>
<div class="photo">
<ul>
<li><img src="image/1.png" alt="1" /></li>
<li><img src="image/2.png" alt="2" /></li>
<li><img src="image/3.png" alt="3" /></li>
<li><img src="image/4.png" alt="4" /></li>
<li><img src="image/5.png" alt="5" /></li>
<li><img src="image/6.png" alt="6" /></li>
</ul>
</div>
<div class="arrow"><span class="iconfont left">?</span> <span class="iconfont right">?</span></div>
<div class="dot">
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<script>
$(document).ready(function(){
var ulWidth=$('.photo ul li').length*$('.photo ul li').eq(1).width();
$('.dot ul li').first().css('color','#db192a');
$('.photo ul').width(ulWidth);
$('.photo,.arrow span').hover(function(){$('.arrow span').toggle()})
function jdshow(){
var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width();
$('.dot ul li').css('color','#fff');
if(index==$('.photo ul li').length-1){index=-1}
$('.dot ul li').eq(index+1).css('color','#db192a');
if($('.photo ul').position().left==-(ulWidth-790)){
$('.photo ul').css('left','790px');//图片宽度
$('.photo ul').clone().appendTo('.photo');
$('.photo ul:first').remove(); 
}
$('.photo ul').animate({
left:'-=790px', 
},10);
}
setInterval(jdshow,2000);
$('.arrow .right').click(function(){
jdshow();
});
$('.arrow .left').click(function(){
/*alert($('.jd-photo ul').position().left);*/
var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width();
$('.dot ul li').css('color','#fff');
$('.dot ul li').eq(index-1).css('color','#db192a');
if($('.photo ul').position().left==0){
$('.photo ul').css('left',-ulWidth);
$('.photo ul').clone().appendTo('.photo');
$('.photo ul:first').remove(); 
}
$('.photo ul').animate({
left:'+=790px', 
},10);
});
$('.dot ul li').click(function(){
var index=$('.dot ul li').index(this); 
$('.photo ul').animate({
left:-index*790, 
},10);
$('.dot ul li').css('color','#fff');
$(this).css('color','#db192a');
});
})
</script>
</body>
</html>

以上所述是小编给大家介绍的jQuery图片轮播功能实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
JavaScript实现移动端拖动元素
Nov 24 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
jQuery代码实现实时获取时间
Jan 29 #Javascript
用director.js实现前端路由使用实例
Jan 27 #Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 #Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 #Javascript
js监听input输入框值的实时变化实例
Jan 26 #Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 #Javascript
You might like
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JS常用正则表达式总结【经典】
2017/05/12 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Python快速从注释生成文档的方法
2016/12/26 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
金士达面试非笔试
2012/03/14 面试题
办公室保洁员岗位职责
2013/12/02 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
交通事故协议书范文
2014/10/23 职场文书
干部理论学习心得体会
2016/01/21 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
python基础详解之if循环语句
2021/04/24 Python
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript