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 鼠标滚轮事件
Apr 09 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
javascript冒泡排序小结
Apr 10 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
分析JS中this引发的bug
Dec 12 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JavaScript链式调用原理与实现方法详解
May 16 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
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
Python处理Excel文件实例代码
2017/06/20 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python实现登录与注册系统
2020/11/30 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
远程教育心得体会
2014/01/03 职场文书
社团活动策划书范文
2014/01/09 职场文书
酒店营销策划方案
2014/02/07 职场文书
火灾现场处置方案
2014/05/28 职场文书
生物技术专业求职信
2014/06/10 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL