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 相关文章推荐
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
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
第二节--PHP5 的对象模型
2006/11/16 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
JavaScript延迟加载
2021/03/09 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
javascript Object与Function使用
2010/01/11 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python爬取淘宝商品销量信息
2018/11/16 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python 实现微信防撤回功能
2019/04/29 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python中取绝对值简单方法总结
2020/07/24 Python
python爬虫如何解决图片验证码
2021/02/14 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
医学生求职自荐信
2013/10/25 职场文书
党员自我对照检查材料
2014/08/19 职场文书
课外小组活动总结
2014/08/27 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript