js轮播图透明度切换（带上下页和底部圆点切换）
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
}
li{
list-style: none;
}
#box{
height:340px;
width:790px;
position: relative;
margin:100px auto;
}
#box #list1{
height:340px;
width:790px;
}
#box #list1 li{
font-size: 80px;
line-height: 340px;
text-align: center;
height:340px;
width:790px;
position: absolute;
left:0;
top:0;
opacity: 0;
filter: alpha(opacity=0);
}
#box #list1 li img{
height:340px;
width:790px;
}
#shang,#xia{
height:80px;
width:50px;
color:#212121;
background: #ccc;
font-size: 60px;
font-weight: bold;
line-height: 80px;
text-align: center;
position: absolute;
top:130px;
opacity: 0.8;
filter: alpha(opacity=80);
cursor: pointer;
}
#shang{
left:0;
}
#xia{
right:0;
}
#box #list2{
height:20px;
width:195px;
position: absolute;
left:297px;
bottom:25px;
opacity: 0.8;
filter: alpha(opacity=80);
}
#box #list2 li{
height:20px;
width:20px;
background: #ccc;
border-radius: 50%;
float: left;
margin-right:5px;
cursor: pointer;
}
#box #list2 li.active{
background: black;
}
</style>
<script type="text/javascript">
onload = function(){
var oBox = document.getElementById('box');
var oLIst1 = document.getElementById('list1');
var aLi1 = oLIst1.getElementsByTagName('li');
var oLIst2 = document.getElementById('list2');
var aLi2 = oLIst2.getElementsByTagName('li');
var oShang = document.getElementById('shang');
var oXia = document.getElementById('xia');
aLi1[0].style.opacity = 1;
aLi1[0].style.filter = 'alpha(opacity=100)';
var size = aLi1.length;
var i = 0;
var timer = setInterval(function(){
i ++;
move();
},2000);
function move(){
if(i >= size){
i = 0
}
if(i < 0){
i = size-1;
}
for(var j = 0; j < aLi1.length; j ++){
if(j == i){
animate(aLi1[j],{opacity:100});
aLi2[j].className = 'active';
}else{
animate(aLi1[j],{opacity:0});
aLi2[j].className = '';
}
}
}
//前一张
oShang.onclick = function(e){
var evt = e || event;
evt.preventDefault();
i --;
move();
}
//后一张
oXia.onclick = function(e){
var evt = e || event;
evt.preventDefault();
i ++;
move();
}
//下面的圆点
for(var k = 0;k < aLi2.length; k ++){
aLi2[k].index = k;
aLi2[k].onmouseenter = function(){
i = this.index;
move();
}
}
oBox.onmouseenter = function(){
clearInterval(timer);
}
oBox.onmouseleave = function(){
timer = setInterval(function(){
i ++;
move();
},2000);
}
/*************************缓冲运动 可封装留着以后备用^_^*************************/
function getStyleAttr(obj, attr){
if (window.getComputedStyle){
return getComputedStyle(obj, null)[attr];
}
else {
return obj.currentStyle[attr];
}
}
function animate(obj, json, fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop = true;
for (var attr in json){
var iTarget = json[attr];
var current;
if (attr == "opacity"){
current = parseFloat(getStyleAttr(obj, attr))*100;
current = Math.round(current);
}
else {
current = parseFloat(getStyleAttr(obj, attr));
current = Math.round(current);
}
var speed = (iTarget-current)/8; (400-393)/8
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if (current != iTarget){
bStop = false;
}
if (attr == "opacity"){
obj.style[attr] = (current+speed)/100;
obj.style.filter = "alpha(opacity=" + (current+speed) + ")";
}
else {
obj.style[attr] = current+speed + "px";
}
}
if (bStop){
console.log("停止运动");
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30);
}
}
</script>
</head>
<body>
<div id="box">
<ul id="list1">
<li style="background: red;">1</li>
<li style="background: yellow;">2</li>
<li style="background: green;">3</li>
<li style="background: blue;">4</li>
<li style="background: blueviolet;">5</li>
<li style="background: brown;">6</li>
<li style="background: orangered;">7</li>
<li style="background: palevioletred;">8</li>
</ul>
<ul id="list2">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li style="margin-right:0px;"></li>
</ul>
<div id="shang">
<
</div>
<div id="xia">
>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们!
相关推荐
-
JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
js改变透明度实现轮播图的算法
前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法. 实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为0,然后在让初始的第一张图片的透明度为1即可,具体算法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>改变透明度算法(经典)</title&
-
原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px
-
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
原生js实现移动开发轮播图、相册滑动特效
使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
-
angularjs实现首页轮播图效果
本文实例为大家分享了angularjs轮播图展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.ba
-
js轮播图透明度切换（带上下页和底部圆点切换）
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; border:none; } li{ list-style: none; } #box{ height:340px; width:
-
简单的JS轮播图代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
-
js轮播图的插件化封装详解
本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = u
-
js轮播图之旋转木马效果
本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl
-
JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: 思路 通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画.显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出. 轮播分为三部分: 自动轮播,左右箭头翻图,底部小圆点点击翻图. 编写程序顺序: 1. 小圆点点击 为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移
-
使用Require.js封装原生js轮播图的实现代码
index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
Vue.js轮播图走马灯代码实例（全）
话不多说先上效果图,本文引荐链接https://www.jb51.net/article/129112.htm 这个是html, <template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click=&q
-
JS轮播图的实现方法2
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: ![轮播图] 思路: 将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片. 轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张. 后面功能实现顺序依旧是写法一里的思路. 戳!写法一地址
-
js轮播图代码分享
大家喜欢的js轮播图片效果,分享给大家. 一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&