无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

张家口小程序制作_完美的js图片轮换效果

时间:2021-01-12 14:33来源:张家口小程序制作 作者:jianzhan 点击:
极致的js照片轮换实际效果 本文关键为大伙儿详尽详细介绍了极致的js照片轮换实际效果,包含上下移动缓和动画特效果,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参
完美的js图片轮换效果       这篇文章主要为大家详细介绍了完美的js图片轮换效果,包括左右移动和缓动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
title 轮播图焦点 /title meta content="还是有地点小瑕疵,1左转变4,4右转变1的时候,图片切换有空白,换下动画模式应该可以?" style padding: 0; margin: 0; list-style: none; .scroll{ width: 300px; height: 200px; border: 1px solid red; margin: 100px auto; position: relative; overflow: hidden; .scroll ul.imgUl{ width: 400%; position: absolute; top: 0; left: 0; .scroll ul.imgUl li{ float: left; .scroll .imgUl img{ vertical-align: middle; /* 消除图片间3px的间距 */ .scroll ul.focus{ position: absolute; left: 50%; bottom: 10px; margin-left: -80px; .scroll ul.focus li{ width: 20px; height: 20px; padding: 5px; text-align: center; margin-right: 10px; border: 2px solid yellow; float: left; color: red; font-weight: 700; background-color: #333; color: white; .scroll ul.focus li.current{ background-color: deeppink; .scroll .arrow{ width: 100%; position: absolute; top: 50%; left: 0; margin-top: -20px; display: none; .scroll .arrow div{ width: 40px; height: 40px; font: 700 18px/40px "宋体"; text-align: center; background: rgba(0,0,0,.3); color: #fff; cursor: pointer; .scroll .arrow div.left{ float: left; .scroll .arrow div.right{ float: right; /style script window.onload = function(){ function $(id){ return document.getElementById(id);} var scrollDiv = $('scrollDiv'); var imgul = $('images'); var focusUl = $('focuses'); var imgLis = imgul.children; var leader = 0, target = 0; var curIndex = 0;//记录当前图片的序号 var leftArrow = $('leftArrow'); var rightArrow = $('rightArrow'); //可自动生成和图片对应的序号 /*for(var i=0; i imgLis.length; i++){ var newLi = document.createElement('li'); newLi.innerHTML=i+1; focusUl.appendChild(newLi); var focusLis = focusUl.children; for(var i=0; i focusLis.length; i++){ focusLis[i].index = i; focusLis[i].onmouseover = function(){ curIndex = this.index; switchFocus(curIndex); target = -this.index * 300; scrollDiv.onmouseover = function(){ $('arrowDiv').style.display="block"; clearInterval(timer); scrollDiv.onmouseout = function(){ $('arrowDiv').style.display="none"; timer = setInterval(autoPlay,3000); leftArrow.onclick = function(){ target +=300; curIndex = curIndex==0 focusLis.length-1 : curIndex-1; switchFocus(curIndex); rightArrow.onclick = function(){ target -=300; curIndex = (curIndex+1) % focusLis.length; switchFocus(curIndex); //缓动效果 setInterval(function(){ if(target 0){ target = -900; leader = -1000; }else if(target -900){ target = 0; leader = 100; leader = leader + (target - leader) / 10; imgul.style.left = leader +"px"; } ,10); switchFocus(0); //每隔3s左移图片 var timer = null; timer = setInterval(autoPlay,3000); function autoPlay(){ target -= 300; curIndex = (curIndex+1) % focusLis.length; switchFocus(curIndex); //转换样式 function switchFocus(curIndex){ for(var j=0; j focusLis.length;j++){ focusLis[j].className=""; focusLis[curIndex].className="current"; /script /head body div id="scrollDiv" ul id="images" li img src="images/01.jpg" alt="" /li li img src="images/02.jpg" alt="" /li li img src="images/03.jpg" alt="" /li li img src="images/04.jpg" alt="" /li /ul ul id="focuses" li 1 /li li 2 /li li 3 /li li 4 /li /ul div id="arrowDiv" div id="leftArrow" /div div id="rightArrow" /div /div /div /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。

(责任编辑:admin)

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866