js轮播（qq幻灯片效果）



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>qq幻灯片轮播</title>
<style type="text/css">
    *{margin:0px; padding:0px;}
    body{background:#000;}
    .box{width:660px; height:330px; position:relative; margin:200px auto;}
    .big_img{width:100%;}
    .list_box{width:100%; height:90px; position:absolute; bottom:0px; left:0px;}
    .tv_text{width:500px; height:30px; position:absolute; top:3px; left:60px; color:#fff; line-height:30px;}
    .ul_box{width:555px; height:45px; position:absolute; top:36px; left:5px; overflow:hidden;}
    .prev{width:38px; height:38px; position:absolute; top:36px; right:48px; background: url(img/btn.gif) center center no-repeat; background-position:0px 0px; }
    .next{width:38px; height:38px; position:absolute; top:36px; right:5px; background: url(img/btn.gif) center center no-repeat; background-position:-38px 0px;}
    .btn_active{opacity: 0.2; filter:alpha(opacity=20);}
    .ul_box ul{position:absolute; top:5px;left:0px;}
    ul li{width:68px; height:38px; position:relative; margin-left:10px; float:left; list-style:none;
     opacity:0.4;}
    .ul_box li img{width:100%; height:100%; }
    .li_active{border:3px solid #fff; box-sizing:border-box; -webkit-box-sizing:border-box; opacity:1;}
    .li_active::before{content:‘‘;width:10px; height:5px; background: url(img/a_hover.gif) center center no-repeat;
        position:absolute; top:-8px; left:24px; display:block; background-size:100%;}
</style>
</head>
<body>
 <div class="box">
     <div class="img_box"><img class="big_img" src="img/pic_1.jpg" ></div>
     <div class="list_box">
         <span class="tv_text"></span>
         <div class="ul_box">
             <ul>
                 <!-- <li><img src="img/ico_1.jpg"></li>
                 <li><img src="img/ico_2.jpg"></li>
                 <li><img src="img/ico_3.jpg"></li>
                 <li><img src="img/ico_4.jpg"></li>
                 <li><img src="img/ico_5.jpg"></li>
                 <li><img src="img/ico_6.jpg"></li>
                 <li><img src="img/ico_7.jpg"></li>
                 <li><img src="img/ico_8.jpg"></li>
                 <li><img src="img/ico_9.jpg"></li>
                 <li><img src="img/ico_10.jpg"></li>
                 <li><img src="img/ico_11.jpg"></li>
                 <li><img src="img/ico_12.jpg"></li>         -->        
             </ul>
         </div>
         <a href="javascript:;" class="prev btn_active"></a>
         <a href="javascript:;" class="next"></a>
     </div>
 </div>






<script type="text/javascript">
   window.onload=function(){
      var strArr=[
         ‘《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...‘,
         ‘《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...‘,
         ‘《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋...‘,
         ‘《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女...‘,
         ‘《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！‘,
         ‘《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战‘,
        ‘第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官‘,
        ‘《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍‘,
        ‘《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光‘,
        ‘《男人帮》[全30集]悲喜双响炮，一个完美结局‘,
        ‘《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨‘,
        ‘《李献计历险记》房祖名患差时症为寻女友开启超时空冒险‘,
        ‘Justin bieber女友动感热单全球首发。‘
      ];
      //初始化
      var imgNum=0;
      var oUl=document.querySelector(‘.ul_box ul‘);
     for(var i=1; i<strArr.length; i++){
        imgNum++;
        var oLi=document.createElement(‘li‘);
        var oImg=document.createElement(‘img‘);
        oImg.src=‘img/ico_‘+imgNum+‘.jpg‘;
        oLi.appendChild(oImg);
        oUl.appendChild(oLi);
     };
     var tv_text=document.querySelector(‘.tv_text‘);
     var oLi=document.querySelectorAll(‘.ul_box ul li‘);
     var oliW=oLi[0].offsetWidth+10;




oUl.style.width=oliW*strArr.length+‘px‘;
     oLi[0].className=‘li_active‘;
     tv_text.innerHTML=strArr[0];
     //--
     var clickNum=0;
     var big_img=document.querySelector(‘.big_img‘);
     var timer=null;
     clickFn();
     timeGo();




var leftVal=0;
     var leftNum=0;
     document.querySelector(‘.next‘).onclick=function(){
        derectionBtn(‘next‘,this)
     }
     document.querySelector(‘.prev‘).onclick=function(){
        derectionBtn(‘prev‘,this)
     }




document.querySelector(‘.box‘).addEventListener(‘mouseover‘,function(){
         clearInterval(timer);
     });
     document.querySelector(‘.box‘).addEventListener(‘mouseout‘,function(){
         timeGo();
     });




function timeGo(){
            clearInterval(timer);
            timer=setInterval(function(){
            if(clickNum>oLi.length-1)
            {
                clickNum=1;
                leftNum=0;
            }
            else
            {
                    clickNum++
            }
            if(clickNum>7){
                leftNum++;           
            }
            Move(oUl,{‘left‘:-leftNum*oliW});
            activeFn(clickNum);
         },1000);
    }


function derectionBtn(derection,that){
        switch (derection){
            case ‘next‘:
                    leftNum++;
                if(leftNum>0){document.querySelector(‘.prev‘).className=‘prev‘;}
                if(leftNum>oLi.length-7){
                    that.classList.add(‘btn_active‘);
                    leftNum=oLi.length-7;
                    return
                }else{
                    if(that.classList.contains(‘btn_active‘)){that.classList.remove(‘btn_active‘);}


};
                Move(oUl,{‘left‘:-leftNum*oliW})
            break;
            case ‘prev‘:
                        leftNum--;
                if(leftNum<oLi.length-7){document.querySelector(‘.next‘).className=‘next‘;}
                if(leftNum<0){
                    that.className=‘prev btn_active‘;
                    leftNum=0;
                    return
                }else{
                    if(that.classList.contains(‘btn_active‘)){that.classList.remove(‘btn_active‘);}


};
                Move(oUl,{‘left‘:-leftNum*oliW})
            break;
        }
     }




function clickFn()
     {
        for(var i=0; i<oLi.length; i++){
        oLi[i].index=i;
        oLi[i].onclick=function(){
           clickNum=this.index+1;
           activeFn(clickNum);
        }
       }
    }


function activeFn(clickNum)
    {
       for(var i=0; i<oLi.length; i++){oLi[i].className=‘‘;};
       oLi[clickNum-1].className=‘li_active‘;
       big_img.src=‘img/pic_‘+clickNum+‘.jpg‘;
       tv_text.innerHTML=strArr[clickNum];
       big_img.style.opacity=0;
       Move(big_img,{‘opacity‘:‘100‘})
    }




}








//----运动框架
    function getStyle(obj, attr){  
    if(obj.currentStyle)    {  
        return obj.currentStyle[attr];  
    }else{  
        return getComputedStyle(obj, false)[attr];  
    }  
}  
function Move(obj,json,fn){  
    //停止上一次定时器  
    clearInterval(obj.timer);  
    //保存每一个物体运动的定时器  
    obj.timer = setInterval(function(){  
        //判断同时运动标志  
        var bStop = true;  
        for(var attr in json){    
            //取当前值    
            var iCur = 0;  
            if(attr == ‘opacity‘){  
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100);  
            }else{  
                iCur = parseInt(getStyle(obj,attr));  
            }  
            //计算速度  
            var iSpeed = (json[attr] - iCur) / 8;  
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
            //检测同时到达标志  
            if(iCur != json[attr]){  
                bStop = false;  
            }     
            //更改属性，获取动画效果  
            if(attr==‘opacity‘){  
                iCur += iSpeed  
                obj.style.filter=‘alpha(opacity:‘ + iCur + ‘)‘;  
                obj.style.opacity=iCur / 100;  
            }  
            else{  
                obj.style[attr]=iCur+iSpeed+‘px‘;  
            }  
        }  
        //检测停止  
        if(bStop){  
            clearInterval(obj.timer);  
            if(fn) fn();  
        }  
    },30)  
} 
//--运动框架结束 
</script>     
</body>
</html>


 
				


				
时间： 2024-11-09 23:26:05 

		


		


	

	
	

		


		
js轮播（qq幻灯片效果）的相关文章


						

		

			

                js轮播效果图
			

		

		

									

				<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> *{ padding: 0px; margin: 0px; } #slideBox{ posi			

		

	

				

		

			

                淡入淡出js轮播广告
			

		

		

									

				淡入淡出js轮播广告,写法类似自动播放的tab选项卡,加入了淡入淡出效果. js代码: function lunbo(contClass, numArr, normalClass, hoverClass){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag =			

		

	

				

		

			

                原生JavaScript实现的图片轮播左右滑动效果函数封装
			

		

		

									

				原生js实现的图片轮播左右滑动效果函数封装 方便以后需要的时候拿出来复用. 适合新手学习使用. 使用方法轮播图的html结构就不多说了.不过有一点:为了实现无缝无限轮播,需要在三张图片的最前面和最后面再额外添加两张图片(见下),原理简单说就是当图片滑动到最后一张时立马跳到第二张,眼睛看上去就像前后无缝一样. 把img_slider.js引入html,然后编辑window.onload = (function () { ··· });中的内容. (获取图片床,按钮,标识等元素.然后调用slideI			

		

	

				

		

			

                轮播图的效果实现小米商城和京东商城
			

		

		

									

				案例一: 效果如下:类似小米商城的轮播图 自动切换的:左右的 路径结构: 代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            padd			

		

	

				

		

			

                Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View
			

		

		

									

				最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面布局实现如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&			

		

	

						

		

			

                问题：关于坛友的一个js轮播效果的实现
			

		

		

									

				需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时  显示影藏的div,再把原来的div给隐藏掉 lunbo.html代码: 1: <!DOCTYPE HTML> 2: <html> 3: <head> 4: <meta http-equiv="content-type" content=&quo			

		

	

				

		

			

                使用JS实现轮播图的效果
			

		

		

									

				其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="box"> <div class="inner"> <ul> <li><a href="#"><img src="images/01.jpg" alt=""/>			

		

	

				

		

			

                根据js轮播图原理写出合理的结构与样式、并实现js交互效果
			

		

		

									

				在JS中,能用 . 的地方一般都可以用 [ ] 取代 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>			

		

	

				

		

			

                实现一个图片轮播-3d播放效果
			

		

		

									

				前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮播的效果,所以写下此文 使用方法: 首先,引入Swipe.js和Swipe.css 定义轮播列表ul[data-ride="swipe"],然后每一个轮播项都加上类 class="item" : 1 <!DOCTYPE html> 2 <html la