Jquery制作--焦点图左右轮播
公司项目经常用到轮播焦点图，于是自己写了一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将css里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，需要用到$(window).resize，目前公司暂时没用到，就先放这个定宽的出来啦。
兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。效果图如下：
Html代码如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>banner图</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/common.js"></script>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="bannerCon">
<ul class="imgList">
<li><a href="#"><img src="data:images/banner01.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/banner02.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/banner03.jpg" alt=""/></a></li>
</ul>
<ul class="btnList clearfix">
<li class="cur"><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<span class="pre-nex prev"><</span>
<span class="pre-nex next">></span>
</div>
</div>
</div>
</body>
</html>
Css样式如下：
@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
margin:;
padding:;
}
ul, ol {
list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
visibility: hidden;
display: block;
font-size:;
content: " ";
clear: both;
height:;
}
/* 具体样式 */
.banner {
position: relative;
height: 400px;
overflow: hidden;
}
.banner .bannerCon {
position: absolute;
top:;
left: 50%;
width: 800px;
height: 400px;
margin-left: -400px;
overflow: hidden;
}
.bannerCon .imgList {
position: absolute;
top:;
left:;
width: 99999px;
height: 400px;
}
.bannerCon .imgList li {
float: left;
width: 800px;
height: 400px;
}
.bannerCon .imgList li a {
position: relative;
display: block;
height: 100%;
}
.bannerCon .imgList li img {
width: 800px;
height: 400px;
}
.bannerCon .pre-nex {
display: none;
position: absolute;
top: 50%;
width: 40px;
height: 60px;
margin-top: -40px;
font: bold 40px/60px Simsun;
color: #ccc;
text-align: center;
border:none;
background: rgba(0,0,0,.30);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
cursor: pointer;
z-index:;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
position: absolute;
left:;
bottom: 20px;
width: 100%;
height: 12px;
text-align:center;
z-index:;
_overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 6px;
background-color:#14829e;
cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }
Js代码如下：
//加载在文本读取之后的js语句 开始 =============================================================
function Scroll(obj,speed,interval){ //父级容器，轮播速度，切换间隔
$("."+obj).each(function(){
var $box = $(this),
$imgUl = $box.children(".imgList"),
$imgLi = $imgUl.children("li"),
$btnUl = $box.children(".btnList"),
$btnLi = $btnUl.children("li"),
$btnPreNex = $box.children(".pre-nex"),
$btnPre = $box.children(".prev"),
$btnNex = $box.children(".next"),
n = $imgLi.length,
width = $imgLi.width(),
left = parseFloat($imgUl.css("left")),
k = 0,
Player;
$imgUl.css("width",n*width);
function scroll(){ //轮播事件
$imgUl.stop().animate({left:-width},speed,function(){
k += 1;
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
$btnLi.removeClass('cur');
if(k >= n){
k = 0;
}
$btnUl.children("li").eq(k).addClass('cur');
});
}
$btnLi.click(function(){ //小圆点点击事件
var index = $btnLi.index(this);
$(this).addClass('cur').siblings("li").removeClass('cur');
if(index >= k){
var dif = index-k;
left = -dif*width;
$imgUl.stop().animate({left:left},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:lt("+dif+")").appendTo($imgUl);
});
}
else{
var j = n-(k-index);
$imgUl.css("left",(index-k)*width);
$imgUl.children("li:lt("+j+")").appendTo($imgUl);
$imgUl.stop().animate({left:0},speed);
}
k = index;
});
$btnPreNex.click(function(){ //左右按钮点击事件
var index = $btnLi.index(this);
if($(this).hasClass('next')){
if(!$imgUl.is(":animated")){
k += 1;
$imgUl.animate({left:-width},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
if(k >= n){
k = 0;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
});
}
}
else {
if(!$imgUl.is(":animated")){
k += -1;
$imgUl.css("left",-width);
$imgUl.children("li:last").prependTo($imgUl);
$imgUl.stop().animate({left:0},speed);
if(k < 0){
k = n-1;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
}
}
});
$box.hover( //鼠标移入、移出事件
function(){
clearInterval(Player);
$btnPreNex.addClass('show');
},
function(){
Player = setInterval(function(){scroll()},interval);
$btnPreNex.removeClass('show');
}
);
Player = setInterval(function(){scroll()},interval);
});
}
$(function () { //读取轮播事件
Scroll("bannerCon",600,4000);
});
注意加载一下jq库，我用的是1.9.1的，其实1.7+的都没问题的。如果觉得对你们有帮助，就给个赞哈~~~
Jquery制作--焦点图左右轮播的更多相关文章
- Jquery制作--焦点图淡出淡入
之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦.这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换 ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- js 滚轮事件 滚轮焦点图（轮播图）
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
- jquery制作一个简单的轮播
效果图: 演示地址: http://ae6623.cn/demo/slider/index.html 思路: 利用css的定位属性 left 进行调整图片的显示,每次点击上一页下一页按钮的时候,-图片 ...
- jquery特效（5）—轮播图③（鼠标悬浮停止轮播）
今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...
- jquery特效（4）—轮播图②（定时自动轮播）
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- jquery-抖动图组轮播动画
JQ匀速抖动图组轮播动画 一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...
随机推荐
- Python的文件操作
文件操作,顾名思义,就是对磁盘上已经存在的文件进行各种操作,文本文件就是读和写. 1. 文件的操作流程 (1)打开文件,得到文件句柄并赋值给一个变量 (2)通过句柄对文件进行操作 (3)关闭文件 现有 ...
- HTML 学习笔记 JQuery（DOM 操作）
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- ActiveMQ笔记(7)：如何清理无效的延时消息？
ActiveMQ的延时消息是一个让人又爱又恨的功能,具体使用可参考上篇ActiveMQ笔记(6):消息延时投递,在很多需要消息延时投递的业务场景十分有用,但是也有一个缺陷,在一些大访问量的场景,如果瞬 ...
- gerrit 为每个工程设置提交的reviewer
尝试安装了 https://gerrit-ci.gerritforge.com/job/plugin-reviewers-stable-2.13/lastSuccessfulBuild/artifac ...
- IO流
流的概念和作用 学习JavaIO,不得不提到的就是JavaIO流. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特 ...
- 【svn】在提交文件是报错：previous operation has not finished;run 'cleanup' if it was interrupted
1.svn在提交文件是报错:previous operation has not finished;run 'cleanup' if it was interrupted2.原因,工作队列被占用,只需 ...
- js或css文件后面的参数是什么意思？
经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...
- A*算法
A*在游戏设计中有它很典型的用法,是人工智能在游戏中的代表. A*算法在人工智能中是一种典型的启发式搜索算法,为了说清楚 A*算法,我看还是先说说何谓启发式算法. 一.何谓启发式搜索算法: 在说它之前 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- 一次基于etcd的分布式锁自动延时失败问题的排查
今天在测试基于etcd的分布式锁过程中,在测试获取锁后,释放之前超出TTL时长的情况下自动延长TTL这部分功能,在延长指定key的TTL时总是返回404错误信息,在对目标KEY更新TTL时目标KEY已 ...