jquery图片轮播特效代码分享


Posted in Javascript onApril 20, 2020

本文实例讲述了jquery图片轮播特效。分享给大家供大家参考。具体如下:

这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效。

运行效果图:

-------------------查看效果 下载源码-------------------

jquery图片轮播特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

为大家分享的jquery图片轮播特效代码如下

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿淘宝首页jquery轮播焦点图</title>
<style>
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}

/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.banner{width:520px; height:280px; position:relative; overflow:hidden;}
.banner-btn{ display:none;}
.banner-btn a{ display:block; line-height:40px; position:absolute;top:120px; width:40px; height:40px;background-color: #000; opacity:0.3; filter:alpha(opacity=30) color: rgb(255, 255, 255);overflow: hidden; z-index:4;}
.prevBtn{left:5px;}
.nextBtn{right:5px;}
.banner-img{ font-size:0; *word-spacing:-1px;/* IE6、7 */ letter-spacing: -3px; position:relative;}
.banner-img li{ display:inline-block;*display:inline;*zoom:1;/* IE6、7 */ vertical-align: top; letter-spacing: normal;word-spacing: normal; font-size:12px;}
.banner i{ background:url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png) no-repeat; width: 15px;height: 23px; cursor:pointer;margin: 8px 0 0 12px; display:block;}
.banner .nextBtn i{ background-position:-200px -24px;}
.banner .prevBtn i{ background-position:-200px 0px;}

.banner-circle{ position:absolute; left:50%; bottom: 15px;height: 13px;text-align: center;font-size: 0;border-radius: 10px; background:rgba(255,255,255,0.3); filter:alpha(opacity:30); }
.banner-circle li{ border-radius: 10px; margin:2px; display: inline-block; display: -moz-inline-stack; vertical-align: middle;zoom: 1; }
.banner-circle li a{ display: block;padding-top: 9px;width: 9px;height: 0;border-radius: 50%; background: #B7B7B7;overflow: hidden;}
.banner-circle .selected a{ background:#F40; }
</style>

<script src="js/jquery.min.js">
</script>

<script>
$(function(){
 var $banner=$('.banner');
 var $banner_ul=$('.banner-img');
 var $btn=$('.banner-btn');
 var $btn_a=$btn.find('a')
 var v_width=$banner.width();
 
 var page=1;
 
 var timer=null;
 var btnClass=null;

 var page_count=$banner_ul.find('li').length;//把这个值赋给小圆点的个数
 
 var banner_cir="<li class='selected' href='#'><a></a></li>";
 for(var i=1;i<page_count;i++){
 //动态添加小圆点
 banner_cir+="<li><a href='#'></a></li>";
 }
 $('.banner-circle').append(banner_cir);
 
 var cirLeft=$('.banner-circle').width()*(-0.5);
 $('.banner-circle').css({'marginLeft':cirLeft});
 
 $banner_ul.width(page_count*v_width);
 
 function move(obj,classname){
 //手动及自动播放
 if(!$banner_ul.is(':animated')){
 if(classname=='prevBtn'){
  if(page==1){
   $banner_ul.animate({left:-v_width*(page_count-1)});
   page=page_count; 
   cirMove();
  }
  else{
   $banner_ul.animate({left:'+='+v_width},"slow");
   page--;
   cirMove();
  } 
 }
 else{
  if(page==page_count){
   $banner_ul.animate({left:0});
   page=1;
   cirMove();
  }
  else{
   $banner_ul.animate({left:'-='+v_width},"slow");
   page++;
   cirMove();
  }
  }
 }
 }
 
 function cirMove(){
 //检测page的值,使当前的page与selected的小圆点一致
 $('.banner-circle li').eq(page-1).addClass('selected')
      .siblings().removeClass('selected');
 }
 
 $banner.mouseover(function(){
 $btn.css({'display':'block'});
 clearInterval(timer);
  }).mouseout(function(){
 $btn.css({'display':'none'}); 
 clearInterval(timer);
 timer=setInterval(move,3000);
  }).trigger("mouseout");//激活自动播放

 $btn_a.mouseover(function(){
 //实现透明渐变,阻止冒泡
  $(this).animate({opacity:0.6},'fast');
  $btn.css({'display':'block'});
  return false;
 }).mouseleave(function(){
  $(this).animate({opacity:0.3},'fast');
  $btn.css({'display':'none'});
  return false;
 }).click(function(){
  //手动点击清除计时器
  btnClass=this.className;
  clearInterval(timer);
  timer=setInterval(move,3000);
  move($(this),this.className);
 });
 
 $('.banner-circle li').live('click',function(){
  var index=$('.banner-circle li').index(this);
  $banner_ul.animate({left:-v_width*index},'slow');
  page=index+1;
  cirMove();
 });
});
</script>

</head>

<body>
<div align="center" style="width:516px; margin:0 auto">
<div class="banner">
 <div class="banner-btn">
 <a href="javascript:;" class="prevBtn"><i></i></a>
 <a href="javascript:;" class="nextBtn"><i></i></a>
 </div>
 <ul class="banner-img">
 <li><a href="#"><img src="images/T1B1JYFCpdXXazuKP7-520-280.jpg"></a></li>
 <li><a href="#"><img src="images/T16YtiFE4aXXb1upjX.jpg"></a></li>
 <li><a href="#"><img src="images/T1Oi0oFrFkXXb1upjX.jpg"></a></li>
 <li><a href="#"><img src="images/T1LtlPFppjXXb1upjX.jpg"></a></li>
 <li><a href="#"><img src="images/T1GGJWFvpgXXazuKP7-520-280.jpg"></a></li>
 <li><a href="#"><img src="images/T104hZFBVdXXazuKP7-520-280.jpg"></a></li>
 </ul>
 <ul class="banner-circle"></ul>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是为大家分享的jQuery超精致图片轮播幻灯片特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
JS实现简易日历效果
Jan 25 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
You might like
php实现的mongodb操作类实例
2015/04/03 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
python实现sublime3的less编译插件示例
2014/04/27 Python
Python中无限元素列表的实现方法
2014/08/18 Python
python实现线程池的方法
2015/06/30 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Numpy的简单用法小结
2019/08/28 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
同事打架检讨书
2014/02/04 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
员工工作表扬信
2015/05/05 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书