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制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
随机推荐
- vue+node+mongodb前后端分离博客系统
感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...
- Python的循环导入问题
循环导入的最好的解决方法是从架构上优化,即调整模块和模块成员变量的设计.一个好的原则是:可导出的成员变量,都不应该依赖于导入进来的成员变量. 但是在业务开发的过程中,总会遇到通过架构层面解决不了的导入 ...
- 使用Docker的macvlan为容器提供桥接网络及跨主机通讯
对于了解Docker容器网络的朋友,我想对虚拟机的网络也不会陌生,毕竟我们是跟随这个时代一起学习和进步的人.相比VM,Docker的网络也在逐步走向成熟,本文主要针对其中的macvlan做下简单的介绍 ...
- python目录遍历文件名称替换
# -*- coding:utf-8 -*- import os import os.path import shutil import chardet import codecs mysql_fil ...
- Qt编写自定义控件2-进度条标尺
前言 进度条标尺控件的应用场景一般是需要手动拉动进度,上面有标尺可以看到当前进度,类似于qslider控件,其实就是qslider+qprogressbar的杂交版本,不过我才用的是纯qpainter ...
- vue v-for的数组改变导致页面不渲染解决方法
直接在数组里,改变数组来达到重新渲染页面的目的, 需要用push等数组方法, 或者$set(),或者给数组重新赋值,来改变数组引用地址 而是直接索引= <body> <div id= ...
- vue的数据绑定和组件化
组件:就是自定义标签, 也是Vue的实例对象; 组件好处:就像工作分工,函数封装等 组件分为全局组件和局部组件: 全局组件,在Vue身上的组件,所有的vue挂载的元素内都可以使用:正是因为这一点,co ...
- HashSet的底层
今天看博客,发现有个哥哥写到 HashSet的底层是数组结构,有点懵逼,不是HashMap吗怎么成数组了? 遂去查了下源码: 得以下结论: HashSet底层是 HashMap,其元素是内部map的k ...
- linux基本介绍
Linux介绍 操作系统: 主要作用是管理好硬件设备,并为用户和应用程序提供简单的接口,以便于使用.作为中间人链接软件和硬件. 不同领域的操作系统: 1.桌面操作系统 Windows(用户群大).ma ...
- 登录注册页面html模版
登录注册页面html模版 地址:http://download.csdn.net/detail/xiaosongaixiaoqian/5432033