jQuery图片无缝轮播
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<script src="js/jquery-1.10.2.min.js"></script>-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <title></title>
<style>
*{
margin: 0;
padding:0;
}
ul{
list-style: none;
}
.banner{
width: 600px;
height: 300px;
border: 2px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.img{
position: absolute;
top: 0;
left: 0;
}
.des{
position: absolute;
bottom: 0;
left: 0;
z-index: -2;
background: #ccc;
}
.des li{
float: left;
width: 600px;
}
.img li{
float: left;
}
.num{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0;
}
.num li{
width: 10px;
height: 10px;
background:rgba(0,0,0,0.5);
display: block;
border-radius: 100%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.btn{
display: none;
}
.btn span{
display: block;
width: 50px;
height: 100px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 40px;
line-height: 100px;
text-align: center;
cursor:pointer;
}
.btn .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
.btn .next{
position: absolute;
right: 0;
top: 50%;
margin-top: -50px;
}
.num .active{
background-color: #fff;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href="#"><img width="600" height="300" src="img/adver01.jpg" alt="第1张图片"></a></li>
<li><a href="#"><img width="600" height="300" src="img/adver02.jpg" alt="第2张图片"></a></li>
<li><a href="#"><img width="600" height="300" src="img/adver03.jpg" alt="第3张图片"></a></li>
<li><a href="#"><img width="600" height="300" src="img/adver04.jpg" alt="第4张图片"></a></li>
<li><a href="#"><img width="600" height="300" src="img/adver05.jpg" alt="第5张图片"></a></li>
<li><a href="#"><img width="600" height="300" src="img/adver06.jpg" alt="第6张图片"></a></li>
</ul>
<ul class="num"></ul>
<ul class="des">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="btn">
<span class="prev" onselectstart="return false;"><</span>
<span class="next" onselectstart="return false;">></span>
</div> </div> <script> $(function(){
var i=0;
var timer=null;
for (var j = 0; j < $('.img li').length; j++) { //创建圆点
$('.num').append('<li></li>')
}
$('.num li').first().addClass('active'); //给第一个圆点添加样式 var firstimg=$('.img li').first().clone(); //复制第一张图片
$('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
//第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
$('.des').width($('.img li').length*($('.img img').width())
); // 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0}); //保证无缝轮播，设置left值
}; $('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) { //设置小圆点指示
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
}) // 上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.img li').length-2;
$('.img').css({left:-($('.img li').length-1)*600});
}
$('.img').stop().animate({left:-i*600},300);
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}) //设置按钮的显示和隐藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
}) //鼠标划入圆点
$('.num li').mouseover(function(){
var _index=$(this).index();
$('.img').stop().animate({left:-_index*600},150);
$('.num li').eq(_index).addClass('active').siblings().removeClass('active');
$('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
}) //定时器自动播放
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
}; $('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},2000) //鼠标移入，暂停自动播放，移出，开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
}; $('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},2000)
}) })
</script> </body>
</html>
jQuery图片无缝轮播的更多相关文章
- jQuery图片无缝轮播插件；
图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...
- js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
随机推荐
- MySQL-[SIGNAL/RESIGNAL/GET DIAGNOSTICS]的使用
最近在做 SQL Server 到 MySQL 的迁移(migration),相较于对表和数据的迁移,最令人犯难的还是在功能性存储过程脚本的改写转换(convert),虽说 MySQL 如今是蓬勃发展 ...
- iOS - 跳转到系统设置
一.跳转到自己应用设置(iOS8以上系统推荐使用) //跳转到自己应用干的设置配置页(如 定位.相机.相册 这些隐私配置) [[UIApplication sharedApplication] ope ...
- macOS Sierra(10.12.6), odoo(11.0), Python(3.5.4)配置
欣闻odoo11支持python3环境了,赶紧在mac平台尝试一下: 前期设置,参考另篇文章:macOS Sierra 10.12.6 odoo 10.0 开发环境配置 因为odoo11尚未正式发布, ...
- 解决 nginx 出现 413 Request Entity Too Large 的问题
1.若nginx用所用的 php 请求解析服务是 fpm, 则检查 /etc/php5/fpm/php.ini 文件中的参数 upload_max_filesize = 20M post_max_si ...
- mysql中的事物处理
首先,事物的概念,保证一组sql语句操作的完整性,在这个过程中要充分考虑到多用户同时访问数据库数据的情况. 关键词有COMMIT,ROLLBACK,,START TRANSACTION
- 16 css实现模糊背景
--------------------- 本文来自 csu_zipple 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/csu_passer/article/det ...
- 一、HTML基础学习
1.基本格式<html> <head><title></title></head> <body></body>< ...
- 剑指offer——python【第21题】栈的压入、弹出序列
题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...
- js中级小知识1
首先我们复习之前的小知识,本期博客与之前有关 js数据类型 基本数据类型:string undefined null boolean numbe ...
- MSSQL：查看所有触发器信息的命令
转自:http://www.2cto.com/database/201307/228708.html 编写程序,有时或为了偷懒,或为更简单地实现所需功能,使用了触发器.这可是把双刃剑,用得不好,程序出 ...