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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP静态成员变量
2017/02/14 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
js里的prototype使用示例
2010/11/19 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python计算程序运行时间的方法
2014/12/13 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python修改字典键(key)的方法
2019/08/05 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
python 8种必备的gui库
2020/08/27 Python
四年级数学教学反思
2014/02/02 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书