jquery实现焦点轮播效果

2024-10-10 02:19:01

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="./css/lunbo.css" rel="external nofollow" >
</head>
<body>
 <div id="banner">
  <ul class="img-ul"></ul>
  <ol class="index-ol"></ol>
 <div class="slide">
  <span class="prev"><</span>
  <span class="next">></span>
 </div>
 </div>
<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/lunbo.js"></script>
</body>
</html>

css代码

div {
 width: 670px;
 height: 240px;
 position: relative;
 overflow: hidden;
}
div > ul,
div ol {
 list-style: none;
 position: absolute;
 margin: 0;
 padding: 0;
}
div > ul.img-ul,
div ol.img-ul {
 width: 3350px;
 height: 240px;
 z-index: 100;
}
div > ul.img-ul > li,
div ol.img-ul > li {
 float: left;
 width: 670px;
 height: 240px;
}
div > ul.index-ol,
div ol.index-ol {
 width: 205px;
 bottom: 10px;
 left: 217px;
 z-index: 1000;
}
div > ul.index-ol > li,
div ol.index-ol > li {
 float: left;
 cursor: pointer;
 margin-left: 20px;
 background: #000;
 color: #fff;
 border-radius: 50%;
 height: 20px;
 width: 20px;
 text-align: center;
 line-height: 20px;
}
div > ul.index-ol > li.active,
div ol.index-ol > li.active {
 background: red;
}
div > div.slide {
 z-index: 500;
 position: absolute;
 width: 670px;
 height: 240px;
 left: 0;
 top: 0;
}
div > div.slide > span {
 cursor: pointer;
 position: absolute;
 top: 100px;
 width: 30px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 font-size: 20px;
 color: #fff;
 background: rgba(0, 0, 0, 0.2);
}
div > div.slide > span:nth-child(1) {
 left: 0;
}
div > div.slide > span:nth-child(2) {
 right: 0;
}

JavaScript代码

 var arr=[
 {"img":"./images/banner_01.jpg"},
 {"img":"./images/banner_02.jpg"},
 {"img":"./images/banner_03.jpg"},
 {"img":"./images/banner_04.jpg"},
 {"img":"./images/banner_05.jpg"},
 ];
var lunbo={
 can:0, //判断
 ul_li:"",//图片列表
 ol_li:"",//数字列表
 width:"",//一个li的宽度
 interval:"",//定时器
 init:function(){
 console.log(this);
 this.view();
 this.view_index();
 $("ol.index-ol").children("li:eq(0)").addClass("active");
 this.width=$("ul.img-ul>li").width(); //670
 this.slide(); //这是左右箭头
 this.animation_index();//这是下标
 this.play(); //这是自动轮播
 this.mouse(); //这是鼠标滑入/滑出
 },
 mouse:function(){
 var _this=this;
 $("#banner").on({
  mouseenter:function(){
  _this.stop()
  },
  mouseleave:function(){
  _this.play();
  }
 })
 },
 play:function(){
 this.interval=setInterval(function(){
  var active_index= parseInt($("ol.index-ol>li.active").attr("data-index"));//得到当前激活向下标
  $("ol.index-ol>li").removeClass("active");
  $(this).addClass("active");
  this.animation(1);
  (active_index==4)&&(active_index=-1);
  $("ol.index-ol>li:eq("+(active_index+1)+")").addClass("active")
 }.bind(this),3000);
 },
 stop:function(){
 clearInterval(this.interval)
 this.interval=null;
 },
 animation_index:function(){//更新下标
 var _this=this;
 $("ol.index-ol>li").mouseenter(function(){//点击下标
  var active_index= $("ol.index-ol>li.active").attr("data-index");//得到当前激活向下标
  var index=$(this).attr("data-index");//得到当前下标;
  if(active_index==index){return;};
  $("ol.index-ol>li").removeClass("active");
  $(this).addClass("active");
  var end=index-active_index;
  _this.animation(-end)
 })
 },
 slide:function(){//点击左右箭头
 var _this=this;
 $("div.slide>span").click(function(){
  if(_this.can){return;};
  var active_index= parseInt($("ol.index-ol>li.active").attr("data-index"));//得到当前激活向下标
  $("ol.index-ol>li").removeClass("active");
  if(this.className=="prev"){
  _this.animation(1);
  (active_index==1)&&(active_index=5);
  $("ol.index-ol>li:eq("+(active_index-1)+")").addClass("active")
  }else{
  _this.animation(-1);
  (active_index==4)&&(active_index=-1);
  $("ol.index-ol>li:eq("+(active_index+1)+")").addClass("active")
  }
 })
 },
 view:function(){//更新图片
 for(var i=0;i<arr.length;i++){
  this.ul_li+="<li data-index="+i+"><img src="+arr[i].img+"></li>"
 }
 $("ul.img-ul").html(this.ul_li);
 this.ul_li="";
 },
 view_index:function(){//更新数字
 for(var i=0;i<arr.length;i++){
  this.ol_li+="<li data-index="+i+">"+(i+1)+"</li>"
 }
 $("ol.index-ol").html(this.ol_li);
 },
 animation:function(n){//做动画
 this.can=1;
 if(n<0){
  arr=arr.splice(arr.length+n,-n).concat(arr);
  this.view();
  $("ul.img-ul").css({"left":n*this.width+"px"});
  $("ul.img-ul").animate({"left":"0px"},1000,function(){
  this.can=0;
  }.bind(this));
 }else{
  $("ul.img-ul").animate({"left":-n*this.width+"px"},1000,function(){
  arr=arr.concat(arr.splice(0,n));
  this.view();
  $("ul.img-ul").css({"left":0+"px"});
  this.can=0;
  }.bind(this));
 }
 }
};
lunbo.init();

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

基于jquery实现轮播焦点图插件

直接上代码,可能不是最好的,欢迎吐槽. /** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */ (function ($) { $.fn.slider = function (opt) { opt = $.extend({ speed:'fast', auto: false, interval: 1000 }, opt); var _this = this; var index = 0; _this.f
jQuery插件实现带圆点的焦点图片轮播切换

这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css
基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu
jQuery焦点图轮播插件KinSlideshow用法分析

本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
基于JQuery实现图片轮播效果(焦点图)

自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改. 效果图如下: Html代码如下: <html> <head> <meta charset="utf-8"> <title&
jQuery焦点图轮播效果实现方法

本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(
jQuery右侧选项卡焦点图片轮播特效代码分享

本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-
jQuery焦点图轮播特效代码分享（3款）

本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果源码下载---------------------
jquery实现焦点轮播效果

HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/lunbo.css" rel="external nofollow" >
使用JQuery实现图片轮播效果的实例(推荐)

[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
完美实现js焦点轮播效果(二)（图片可滚动）

本文在前一篇js焦点轮播效果的基础上,使用函数递归实现图片滑动切换,采用辅助图片实现图片无限滚动等技巧,具体内容如下假如前后不加一张图片的话,图片顺序为[1,2,3,4,5],当你点到第 5 张图时,再点"下一张"(就是要回到第 1 张图那里),这时候,你想象下那个画面,会一瞬间"刷刷刷"地闪过中间那几张图片才能到第 1 张图那里,这样,太难看了吧. 为了解决这个问题,所以要在第 5 张那里加多一张 1 图,图片顺序为 [1,2,3,4,5,1].当你在第 5 张
jquery实现呼吸轮播效果

本文实例为大家分享了jquery实现呼吸轮播效果的具体代码,供大家参考,具体内容如下大概思路: 呼吸轮播就是图片淡入淡出轮播. div(设置相对定位)里存放ul,li不需要float:left,设置绝对定位即可.left:0,top:0. 此时不需要在所有图片后面补假0. div里还包括左右按钮,下面小圆点,通过绝对定位,把它们定位到合适位置就好. 设置index为0,点击右按钮时,当前图片淡出,index++,当图片为最后一个的时候,index设置为0,新图片淡入.下面小圆点对应变色. 左按
jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片 4. 手动轮播2:点击左右箭头也可以切换图片效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">
使用jQuery实现图片轮播效果

jQuery是对JavaScript的简化,语法没有太大区别,比较JavaScript更加容易理解,代码量更少. 用jQuery实现图片轮播需要有以下步骤: 1.对图片区域获取,想象中我们所用的图片是按照顺序排列起来,按照一定的时间切换图片的位置来实现轮播 2.对左右两个按钮设置监听,当点击按钮时,要切换到前一张或者后一张 3.对图片底部的小圆点设置监听事件,当点击小圆点时,切换到相应的图片位置,而且小圆点也要点亮 4.对图片整体设置定时器,让图片自己轮播,再设置一个监听函数,让
完美实现js焦点轮播效果(一)

最简单轮播形式,js中通过pic的display属性控制变换,也可通过调整Pic的margin-Left 效果如图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; p
JQuery实现图片轮播效果

用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,大大简化了js的代码. 制作原理: 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数代码说明: filter(":visible") :获取所有可见的元素 unbind():从匹配

jquery实现焦点轮播效果

相关推荐

随机推荐