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

2024-09-22 04:36:16

导读大家好，农企新闻小编来为大家解答以上问题。jquery左右滑动效果，js实现点击左右滚动jquery焦点图特效很多人还不知道，现在让我们一起来看看吧！实现即时通信软件商城点击左右滚动框架焦点图特效的代

大家好，农企新闻小编来为大家解答以上问题。jquery左右滑动效果，js实现点击左右滚动jquery焦点图特效很多人还不知道，现在让我们一起来看看吧！

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

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

　　<ul>

　　</ul>

　　</div>

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

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

　　</body>

　　</html>

　　$(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); //为当前的按钮切换到选中的效果

　　}

　　};

　　});