jQuery 图片轮播
HTML
<div class="carousel">
<ul class="car-img">
<li><img src="data:images/imgs1.jpg"></li>
<li><img src="data:images/imgs2.jpg"></li>
<li><img src="data:images/imgs1.jpg"></li>
<li><img src="data:images/imgs2.jpg"></li>
<li><img src="data:images/imgs1.jpg"></li>
<li><img src="data:images/imgs2.jpg"></li>
</ul>
<div class="navgation">
<span class="nav-prev"><</span>
<span class="nav-next">></span>
</div>
<ul class="car-btn">
<li class="lihover"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
*{
margin:0;
padding:0;
border:0;
box-sizing:border-box;
}
li{
list-style:none;
}
.carousel{
position:relative;
width:100%;
height:600px;
}
.carousel .car-img{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
.carousel .car-img li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.carousel .car-img li img{
border:0;
width:100%;
height:100%;
}
.carousel .navgation{
position:absolute;
top:295px;
width:100%;
color:#fff;
font-size:30px;
line-height:45px;
}
.carousel .navgation .nav-prev{
display:inline-block;
width:30px;
height:50px;
background:rgba(51,51,51,.5);
}
.carousel .navgation .nav-next{
float:right;
display:inline-block;
width:30px;
height:50px;
background:rgba(51,51,51,.5);
}
.carousel .navgation .nav-prev.btnhover,.carousel .navgation .nav-next.btnhover{
color:red;
cursor:pointer;
}
.carousel .car-btn{
position:absolute;
bottom:20px;
width:auto;
margin-left: calc(50% - 120px);
overflow:hidden;
}
.carousel .car-btn li{
float:left;
margin:10px;
width:20px;
height:20px;
border-radius:20px;
background:rgba(102,255,0,1);
}
.carousel .car-btn li.lihover{
float:left;
margin:10px;
width:20px;
height:20px;
border-radius:20px;
background:rgba(255,0,0,1);
}
jQuery
$(function(){
var isPagerClick=false, //判断底下的小按钮
isPrevClick=false, //判断左右滑动的按钮
index=0, //目标值
pre=0,
handid;
start();
function start(){
init(); //初始化函数
$(".car-img li").eq(0).fadeIn().siblings().fadeOut();
handid = setInterval(play,2000); //轮播
}
function init(){
$(".car-btn li").bind("click",pagerClick); //给小按钮绑定点击事件
$(".navgation span").bind("click",btnClick);//给左右按钮绑定点击事件
$(".navgation span").hover(btnMouseOver,btnMouseOut);
}
function pagerClick(){ //小按钮的点击事件
isPagerClick=true; //已经点击
clearInterval(handid); //消除setInterval
var oPager=$(this).index(); //获取点击按钮的索引值
if(oPager != pre) //判断点击按钮的位置
{
index=oPager - 1;
play();
}
}
function btnClick(){
if($(this).hasClass("nav-prev")){ //判断点击按钮的 左 或者是 右
isPrevClick=true;
clearInterval(handid);
if(index==0 || index==1)
{
if(index==0){index=$(".car-img li").length-2;}
else{index=$(".car-img li").length-1;}
}else
{
index-=2;
}
play();
}
else{
isPrevClick=true;
clearInterval(handid);
play();
}
}
function btnMouseOver(){
$(this).addClass("btnhover");
}
function btnMouseOut(){
$(this).removeClass("btnhover");
}
function play(){
index++;
if(index == $(".car-img li").length)
{
index = 0;
}
$(".car-img li").eq(pre).fadeOut(100,function(){
$(".car-img li").eq(index).fadeIn(500,function(){
if(isPagerClick) //判断是否点击了
{
handid=setInterval(play,2000); //重新设置setInterval
isPagerClick=false;
};
if(isPrevClick)
{
handid=setInterval(play,2000);
isPrevClick=false;
}
}).siblings().fadeOut();
$(".car-btn li").eq(index).addClass("lihover");
$(".car-btn li").eq(pre).removeClass("lihover");
pre=index;
});
}
})
效果图
jQuery 图片轮播的更多相关文章
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- jQuery 图片轮播的代码分离
以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...
- 面板支持单个,多个元素的jQuery图片轮播插件
一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...
随机推荐
- Poetize6: Acting Cute
3042: Acting Cute Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 59 Solved: 36[Submit][Status] Des ...
- java编码问题深入总结
Java语言能够这么普遍的应用,与其国际化的能力是 分不开的,国际化的编码是Java国际化中最重要的一个组成部分,Java的国际化编码能力与其使用Unicode编码是直接相关的.在Java中,任何 ...
- wamp中的httpd.conf文件设置
ServerName localhost 缺省情况下,并不需要指定这个ServerName参数,服务器将自动通过名字解析过程来获得自己的名字,但如果服务器的名字解析有问题(通常为反向解析不正确),或者 ...
- 在Apache+php中使用json来通讯
示例代码: <?php // 获取输入的内容 $request = http_get_request_body(); // 按json格式解析成一个 php对象 $json_obj = json ...
- Bellman-Bord(贝尔曼-福特)
include const int inf=0x3f3f3f3f; int main() { int m,n; scanf("%d%d",&n,&m); int u ...
- Uva1343-The Rotation Game-IDA*算法
原题https://uva.onlinejudge.org/external/13/1343.pdf 题意: 有个#字型的棋盘,2行2列,一共24个格. 如图:每个格子是1或2或3,一共8个1,8个2 ...
- Linus:为何对象引用计数必须是原子的
Linus大神又在rant了!这次的吐槽对象是时下很火热的并行技术(parellism),并直截了当地表示并行计算是浪费所有人时间(“The whole “let’s parallelize” thi ...
- nat模式、路由模式,网桥模式
路由器的几种连接方式 NAT英文全称是“Network Address Translation”,中文意思是“网络地址转换”,它是一个IETF(Internet Engineering Task Fo ...
- Linux下profile environment bashrc的区别
先将export LANG=zh_CN加入/etc/profile ,退出系统重新登录,登录提示显示英文.将/etc/profile 中的export LANG=zh_CN删除,将LNAG=z ...
- vue-cli 中 使用vue-resource 输出后台数据
阅读此文前,请了解vue-cli 组件如何使用 http://www.cnblogs.com/pearl07/p/6252116.html 1,mock(模拟)后台数据(新建data.Json文件) ...