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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
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中文字符串截取多种方法汇总
2016/10/06 PHP
使用JS读秒使用示例
2013/09/21 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python3 flask实现文件上传功能
2020/03/20 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python实现图片识别汽车功能
2018/11/30 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python交易记录链的实现过程详解
2019/07/03 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python基于template实现字符串替换
2020/11/27 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
商务助理岗位职责
2013/11/13 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
财务工作失误检讨书
2015/02/19 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python
muduo TcpServer模块源码分析
2022/04/26 Redis
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技