js实现的透明按钮图片滑动切换焦点图特效源码.zip资源-CSDN文库

共12个文件

jpg：9个

png：2个

html：1个

版权申诉

101 浏览量 2022-11-01 01:01:18 上传评论收藏 141KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

js实现的透明按钮图片滑动切换焦点图特效源码.zip （12个子文件）

132677952268781059

images

0721js005.jpg 21KB

bodyBg.jpg 307B

0721js006.jpg 24KB

0721js004.jpg 23KB

0721js003.jpg 22KB

bodyBg2.jpg 306B

ink0721hui1.png 609B

0721js001.jpg 22KB

ink0721hui.png 557B

bodyBg3.jpg 307B

0721js002.jpg 22KB

index.html 7KB

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js透明按钮图片滑动切换焦点图 - 网站源码</title> <style type="text/css"> body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none; font-size:12px} h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal;} li { list-style-type:none } .column1_left { width:321px; margin:0 auto; text-align:center; border:1px solid #CCC; padding:2px } .container { width:321px; height:306px; overflow:hidden; position:relative; background:#000 } .slider li { list-style:none; display:inline; } .slider img { width:321px; height:279px; display:block; border:0; } .slider2 li { float:left; position:relative } .num { position:absolute; right:100px; bottom:4px; height:20px; _bottom:1px; } .num li { float: left; width:21px; height:20px; background:url(images/ink0721hui.png) no-repeat center center; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ink0721hui.png', sizingMethod='crop'); cursor: pointer; overflow: hidden; } .num li.on { background:url(images/ink0721hui1.png) no-repeat center center; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ink0721hui1.png', sizingMethod='crop'); width:21px; height:20px; } .idSiideer_pos{height:27px; line-height:27px; color:#FFF;position:absolute; left:0px; bottom:0px; width:321px; z-index:10; text-align:center;} .idSiideer_pos2{height:27px; background:#000; position:absolute; left:0px; bottom:0px; width:321px;filter:alpha(opacity=50);opacity:0.5;} </style> </head> <body> <div style="background:#FFF; padding:50px;">  <div class="column1_left"> <div class="container" id="idTransformView2"> <ul class="slider slider2" id="idSlider2"> <li><a href=""><img src="images/0721js001.jpg"/></a> <div class="idSiideer_pos">女星露背大比拼谁是你心中的“美背女神”</div> <div class="idSiideer_pos2"></div> </li> <li><a href=""><img src="images/0721js002.jpg"/></a> <div class="idSiideer_pos">如此惊艳的造型，让人不禁感叹</div> <div class="idSiideer_pos2"></div> </li> <li><a href=""><img src="images/0721js003.jpg"/></a> <div class="idSiideer_pos">林志玲身穿前短后长的银色亮片裙亮相</div> <div class="idSiideer_pos2"></div> </li> <li><a href=""><img src="images/0721js004.jpg"/></a> <div class="idSiideer_pos">女星露背大比拼谁是你心中的“美背女神”</div> <div class="idSiideer_pos2"></div> </li> <li><a href=""><img src="images/0721js005.jpg"/></a> <div class="idSiideer_pos">如此惊艳的造型，让人不禁感叹</div> <div class="idSiideer_pos2"></div> </li> <li><a href=""><img src="images/0721js006.jpg"/></a> <div class="idSiideer_pos">林志玲身穿前短后长的银色亮片裙亮相</div> <div class="idSiideer_pos2"></div> </li> </ul> <ul class="num" id="idNum2"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script type="text/javascript"> //计算idslider2的宽度开始 var kuan1=0; var kuand=document.getElementById('idSlider2') var kuan=document.getElementById('idSlider2').getElementsByTagName("li"); var tpz=kuan.length;//图片总个数 for(var i=0; i<kuan.length; i++){ kuan1+=321; } kuand.style.width=kuan1+'px'; //计算结束 var keVar = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var TransformView = Class.create(); TransformView.prototype = { //容器对象,滑动对象,切换参数,切换数量 initialize: function(container, slider, parameter, count, options) { if(parameter <= 0 || count <= 0) return; var oContainer = keVar(container), oSlider = keVar(slider), oThis = this; this.Index = 0;//当前索引 this._timer = null;//定时器 this._slider = oSlider;//滑动对象 this._parameter = parameter;//切换参数 this._count = count || 0;//切换数量 this._target = 0;//目标参数 this.SetOptions(options); this.Up = !!this.options.Up; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; oContainer.style.overflow = "hidden"; oContainer.style.position = "relative"; oSlider.style.position = "absolute"; oSlider.style.top = oSlider.style.left = 0; }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Up: true,//是否向上(否则向左) Step: 5,//滑动变化率 Time: 10,//滑动延时 Auto: true,//是否自动转换 Pause: 2000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){}//完成转换时执行 }; Object.extend(this.options, options || {}); }, //开始切换设置 Start: function() { if(this.Index < 0){ this.Index = this._count - 1; } else if (this.Index >= this._count){ this.Index = 0; } this._target = -1 * this._parameter * this.Index; this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow); if (iStep != 0) { this._slider.style[style] = (iNow + iStep) + "px"; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); } else { this._slider.style[style] = this._target + "px"; this.onFinish(); if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); } } }, //获取步长 GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.Step; if (iStep == 0) return 0; if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); return iStep; }, //停止 Stop: function(iTarget, iNow) { clearTimeout(this._timer); this._slider.style[this.Up ? "top" : "left"] = this._target + "px"; } }; window.onload=function(){ function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; var objs2 = keVar("idNum2").getElementsByTagName("li"); var tv2 = new TransformView("idTransformView2", "idSlider2", 321, tpz, { onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式 Up: false });//6是轮播总数 tv2.Start(); Each(objs2, function(o, i){ o.onmouseover = function(){ o.className = "on"; tv2.Auto = false; tv2.Index = i; tv2.Start(); } o.onmouseout = function(){ o.className = ""; tv2.Auto = true; tv2.Start(); } }) } </script>  </div> </body> </html>

评论收藏

内容反馈

版权申诉