完美的js图片轮换效果
更新时间：2017年02月05日 11:16:11 作者：秋天1014童话
这篇文章主要为大家详细介绍了完美的js图片轮换效果，包括左右移动和缓动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js轮播图焦点的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图焦点</title>
<meta content="还是有地点小瑕疵，1左转变4,4右转变1的时候，图片切换有空白，换下动画模式应该可以？">
<style>
*{
padding: 0;
margin: 0;
}
ul{
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 class="scroll" id="scrollDiv">
<ul class="imgUl" 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 class="focus" id="focuses">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="arrow" id="arrowDiv">
<div class="left" id="leftArrow"><</div>
<div class="right" id="rightArrow">></div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了原生JS实现拖拽位置预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10![JavaScript面向对象之体会[总结]](//img.jbzj.com/images/xgimg/bcimg1.png)
看过很多JavaScript书，对JavaScript的面向对象讲的都比较深入，但是并没有做到深入浅出，总结了我做的一些JavaScript程序的经验，以简洁明了的文字使大家明白JavaScript面向对象的实现。2008-11-11
这篇文章主要介绍了bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组,当我点击 + 按钮时，会添加一行输入框组；当点击 - 按钮时，会删除这一行输入框组。具体实现代码大家参考下本文2017-11-11
本文是如何编写高质量JS代码系列文章的第二篇，前篇文章反响还不错，应小伙伴们的要求，今天继续此系列的文章，有需要的小伙伴参考下。2015-02-02
如何实现textarea里的不同文本显示不同颜色呢？控制textarea的style设置Textarea以及把文本放到标记里都不会起作用，下面有个不错的解决方法，感兴趣的朋友可以了解下2014-01-01
javascript 在事件监听方面的兼容性总结，注意是由于多个浏览器的不一致，导致大家在js书写时需要考虑多个浏览器的兼容性。2010-04-04
正如标题所言使用js如何判断不同系统的浏览器类型，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了JavaScript常用数组操作方法，包含ES6方法,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下2018-09-09
js的几种继承方式在我们面试的时候经常会被问到，所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。本文为大家整理了JavaScript中面试常考的六种继承方式，需要的可以参考一下2023-02-02
全部限制那是很简单的事，直接把<script>脚本块过滤掉就行了，但是部分限制又是如何做到的呢，下面我们一起来看看2014-09-09
![JavaScript面向对象之体会[总结]](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论