jquery实现横向图片轮播特效代码分享


Posted in Javascript onNovember 19, 2015

一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。
兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。效果图如下:

jquery实现横向图片轮播特效代码分享

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 clearfix">
 <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
 <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
 <li><a href="#"><img src="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: 0;
 padding: 0;
}
ul, ol {
 list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
} 
/* 具体样式 */
.banner {
 position: relative;
 height: 400px;
 overflow: hidden;
}
.banner .bannerCon {
 position: absolute;
 top: 0;
 left: 50%;
 width: 800px;
 height: 400px;
 margin-left: -400px;
 overflow: hidden;
}
.bannerCon .imgList {
 position: absolute;
 top: 0;
 left: 0;
 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: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
 position: absolute;
 left: 0;
 bottom: 20px;
 width: 100%;
 height: 12px;
 text-align:center;
 z-index: 2;
 _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图片轮播效果,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
来自qq的javascript面试题
Jul 24 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
Jquery 全选反选实例代码
Nov 19 #Javascript
Bootstrap每天必学之前端开发框架
Nov 19 #Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 #Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 #Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
You might like
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP CURL使用详解
2019/03/21 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
javascript 写类方式之二
2009/07/05 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
清洁工表扬信
2014/01/08 职场文书
善意的谎言事例
2014/02/15 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
社区居务公开实施方案
2014/03/27 职场文书
小学教师评语大全
2014/04/23 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
文体活动总结
2015/02/04 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书