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制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
随机推荐
- Non-zero exit code (1)
刚报了这个错Non-zero exit code (1) 经排查执行这个命令就好了 python -m pip install --upgrade pip 一定要多看报错,报错中有提示的
- SQL Server清空日志以及查看日志大小语句
为了安全起见,使用的时候,先数据备份一遍 作者hongb:SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace) https://www.cnblogs.com ...
- 死锁的原因及解决办法RLock递归锁
死锁 说到死锁,可以讲一个科学家吃面的问题: 有几个科学家在一张桌子旁,桌子上只有一把筷子和一碗面,我们将面和筷子都加锁.这是可能会导致一个科学家抢到面,另一个科学家抢到筷子,这是就全部阻塞了,这就是 ...
- linux应用以及常用命令
各目录作用"/" :Linux文件系统的入口.也是最高一级的目录."/bin":基本系统所需要的命令,功能和"/usr/bin"类似,这个目 ...
- CSS斜切角
问题 斜切角在Web设计和印刷中是相当受欢迎的样式.它通常是在一个或多个元素的角落切一个45°的角(也就是所谓的斜切角).特别是最近,扁平化设计的势头压过了拟真设计,也使这种效果更加流行.当斜切角只存 ...
- IO流实例
//字节流: import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;impor ...
- 微信小程序（微信应用号）组件讲解[申明:来源于网络]
微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html
- Codeforces 1090A - Company Merging - [签到水题][2018-2019 Russia Open High School Programming Contest Problem A]
题目链接:https://codeforces.com/contest/1090/problem/A A conglomerate consists of n companies. To make m ...
- Codeforces 431C - k-Tree - [树形DP]
题目链接:https://codeforces.com/problemset/problem/431/C 题意: 定义一个 $k$ 树,即所有节点都有 $k$ 个儿子节点,相应的这 $k$ 条边的权重 ...
- LeetCode 448 Find All Numbers Disappeared in an Array 解题报告
题目要求 Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice a ...