当前位置:首页 > 科技 > 正文内容

js实现点击左右滚动jquery焦点图特效(jquery左右滑动效果)

2019-05-18 21:06:06科技364

大家好,今天就和丹尼一起来看看这个问题吧 。jquery左右滑动效果,js实现点击左右滚动jquery焦点图特效很多人还不知道,现在让我们一起来看看吧!

实现即时通信软件商城点击左右滚动框架焦点图特效的代码!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '

js实现点击左右滚动jquery焦点图特效(jquery左右滑动效果)

html xmlns=' http://。w3。' org/1999/XHTML '

meta http-equiv=' Content-Type ' Content=' text/html;charset=gb2312' /

style type='text/css '

body { font-size :12 px颜色: # 222字体系列:宋体,宋体、Helvetica、无衬线. background: # f0f0f0}

ul,李{列表式:无;保证金:0 pxpadding:0px}

img { border:0}

/* 仿即时通信软件商城点击左右滚动框架焦点图特效插件*/。焦点{宽度:800像素高度:280像素溢出:隐藏;位置:相对相对;}。焦点ul { height:380px位置:绝对;}。焦点ul li { float:left宽度宽度:800像素高度:280像素溢出:隐藏;位置:相对相对;背景: # 000}。焦点ul李div {位置:绝对;溢出:隐藏;}。专注btnBg { position:absolute宽度宽度:800像素高度:20像素左:0;底部:0;背景: # 000显示:无;}。专注btn {绝对位置:宽度width :780 px height :23 px padding :0 px 10px 0px 10 px right :0 bottom :6 pxtext-align : right;}。专注BTN span { display : inline-block;_ display : inline _ zoom :1 width :25 px height :24 px行高:24 px文本对齐:居中;_ font-size :0左边距:5 px光标:指针;background: # fff}。专注BTN跨度。在{ background : # fff}。专注preNext { width :45 px height :100 px位置:绝对;top :90 px background : URL(img/sprite。png)无重复0 0;光标:指针;}。专注pre { left:0}。专注。接下来{ right:0背景-位置:右上;}

/风格

脚本类型=' text/JavaScript ' src=' js/jquery。量滴js '/脚本

脚本类型=' text/JavaScript ' src=' js/sl。js '/脚本

脚本类型='文本/javascript '

$(文档)。ready(function(){

$.焦点(' #焦点001 ');

$.焦点(' #焦点002 ');

});

/脚本

/头

bodyg

  <h1></h1>

  <div class="focus" id="focus001">

  <ul>

  <li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/03.jpg" alt="jquery特效" /></a></li>

  <li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/02.jpg"/></a></li>

  <li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/03.jpg" alt="仿QQ商城点击左右滚动jquery焦点图特效" /></a></li>

  </ul>

  </div>

  <p>修改的几个地方:1、隐藏了半透明背景条,2、把那个小常条滑块读出了1234这些数字。 你不喜欢这样你可以修改样式和自己改动下jquery代码。</p>

  <p>调用方法:很简单,$.focus("#focus001"); 一些参数设置,可以修改js中的设置,源作者已经注释的很清楚了。</p>

  </body>

  </html>

  JS

  $(function() {

  jQuery.focus = function(slid) {

  var sWidth = $(slid).width(); //获取焦点图的宽度(显示面积)

  var len = $(slid).find("ul li").length; //获取焦点图个数

  var index = 0;

  var picTimer;

  //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮

  var btn = "<div class='btnBg'></div><div class='btn'>";

  for(var i=0; i < len; i++) {

  var ii = i+1;

  btn += "<span>"+ii+"</span>";

  }

  btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";

  $(slid).append(btn);

  $(slid).find("div.btnBg").css("opacity",0.5);//find() 函数返回在字符串中子字符串的位置。

  //为小按钮添加鼠标滑入事件,以显示相应的内容

  $(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {

  index = $(slid+" .btn span").index(this);

  showPics(index);

  }).eq(0).trigger("mouseenter");

  //上一页、下一页按钮透明度处理

  $(slid+" .preNext").css("opacity",0.2).hover(function() {

  $(this).stop(true,false).animate({"opacity":"0.5"},300);

  },function() {

  $(this).stop(true,false).animate({"opacity":"0.2"},300);

  });

  //上一页按钮

  $(slid+" .pre").click(function() {

  index -= 1;

  if(index == -1) {index = len - 1;}

  showPics(index);

  });

  //下一页按钮

  $(slid+" .next").click(function() {

  index += 1;

  if(index == len) {index = 0;}

  showPics(index);

  });

  //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度

  $(slid+" ul").css("width",sWidth * (len));

  //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放

  $(slid).hover(function() {

  clearInterval(picTimer);

  },function() {

  picTimer = setInterval(function() {

  showPics(index);

  index++;

  if(index == len) {index = 0;}

  },4000); //此4000代表自动播放的间隔,单位:毫秒

  }).trigger("mouseleave");

  //显示图片函数,根据接收的index值显示相应的内容

  function showPics(index) { //普通切换

  var nowLeft = -index*sWidth; //根据index值计算ul元素的left值

  $(slid+" ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position

  $(slid+" .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果

  $(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果

  }

  };

  });

猜你喜欢:

1.jS获取鼠标坐标、获取鼠标像素点

2.怎么用js实现简单鼠标跟随效果

3.js怎么获取鼠标在div中的相对位置

4.js设置鼠标光标形状

5.Chrome浏览器的鼠标手势的使用方法

这篇文章到此就结束,希望能帮助到大家。

扫描二维码推送至手机访问。

版权声明:文章内容摘自网络,如果无意之中侵犯了您的版权,请联系本站,本站将在3个工作日内删除。谢谢!

本文链接:http://xixia168.cn/n/kj/1808.html

标签: 特效效果
分享给朋友:

“js实现点击左右滚动jquery焦点图特效(jquery左右滑动效果)” 的相关文章

什么叫一甲子(一甲子是多少年)

什么叫一甲子(一甲子是多少年)

大家好,今天就和可心一起来看看这个问题吧 。一甲子是多少年,什么叫一甲子很多人还不知道,现在让我们一起来看看吧!  一、  一甲子是多少年  一甲子就是表示六十年,它是古代的干支纪年法中的说法,人们通常也用一甲子来表示年岁,比如称六十岁的人是“花甲之年”,意思就是他已经有六十岁了。  甲子为干支之一...

中元节的真正来历是什么(中元节的来历和传说)

中元节的真正来历是什么(中元节的来历和传说)

大家好,今天就和猫猫一起来看看这个问题吧 。中元节的来历和传说,中元节的真正来历是什么很多人还不知道,现在让我们一起来看看吧!  一、中元节的来历和传说二、  道教传说  “中元节”之名起于北魏,“中元”是道教的说法。道教经典称正月十五为上元,七月十五为中元,十月十五为下元。又将“三元”与“三官”相...

春分有什么特殊寓意(春分节气的含义是什么)

春分有什么特殊寓意(春分节气的含义是什么)

大家好,今天就和吖吖一起来看看这个问题吧 。春分节气的含义是什么,春分有什么特殊寓意很多人还不知道,现在让我们一起来看看吧!  一、  春分的“分”有两个含义:  1、指“春分秋分,昼夜平分”。  春分之日太阳光直射在赤道上,几乎全球昼夜等长,都是12小时,此时北极点在经历了半年的黑夜后,在这一天初...

2022中国女神节是哪一天(2022女神节是几月几号)

2022中国女神节是哪一天(2022女神节是几月几号)

大家好,今天就和大牛一起来看看这个问题吧 。2022女神节是几月几号,2022中国女神节是哪一天很多人还不知道,现在让我们一起来看看吧!  一、  2022女神节是几月几号  2022年中国女神节是在3月7日,也就是女生节演变而来,原来我国只有3月8日妇女节,后来在前一天发展出了女生节,网络上也有称...

春节有哪些传说故事(关于春节的传统小故事)

春节有哪些传说故事(关于春节的传统小故事)

大家好,今天就和小鸥一起来看看这个问题吧 。关于春节的传统小故事,春节有哪些传说故事很多人还不知道,现在让我们一起来看看吧!  一、  春节的传说:争花治天下  在陕西关中一带民间,流传着有关春节的传说故事。传说,玉皇大帝为了治理人间,就派天宫的弥勒佛下凡。这事被如来佛知道了,心想,我算佛主哩,为啥...

地藏王生日是哪天(2021地藏王菩萨生日)

地藏王生日是哪天(2021地藏王菩萨生日)

大家好,今天就和蜜蜜一起来看看这个问题吧 。2021地藏王菩萨生日,地藏王生日是哪天很多人还不知道,现在让我们一起来看看吧!    2021地藏王菩萨生日为09月06日,每年农历七月三十日(或廿九日)都被称为七月晦日,为地藏王节。相传是地藏王涅槃得道之日。地藏菩萨主宰阴司,是阎罗王的化身。他手持宝珠...