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 相关文章推荐
jQuery实现表头固定效果的实例代码
May 24 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
JavaScript 基本概念
2015/01/20 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Python如何读写字节数据
2020/08/05 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
中科软测试工程师面试题
2012/06/16 面试题
销售员个人求职的自我评价
2014/02/10 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
委托书的写法
2014/09/16 职场文书
计划生育证明书写要求
2014/09/17 职场文书
毕业证代领委托书
2014/09/26 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
汽车转让协议书
2015/01/29 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android