原生js图片广告手风琴切换轮播代码



210 839 280



特效描述:原生js 图片广告 手风琴切换轮播,js图片手风琴,手风琴轮播切换代码

代码结构

1. HTML代码

	<div style="height:100px;"></div>
    <div id="subject" class="home-subjects-v2">
    <ul>
        <li>
            <a>
                <img src="image/1.gif">
                <div class="info">
                <h3 style="color:#f62368">聚美妆</h3>
                <p>聚美妆1/2周年庆</p>
                <p class="price"><strong>1</strong><i>折起</i></p>
              	<p class="more">进入专题抢购 &gt; </p>
                </div>
                <s class="line"></s>
                <i class="mask"></i>
            </a>
        </li>
        <li class="big">
            <a>
                <img src="image/2.gif">
                <div class="info">
                <h3 style="color:#ff578a">Baby购</h3>
                <p>宝宝该换装了,新品抢购</p>
                <p class="price"><strong>2.5</strong><i>折起</i></p>
              	<p class="more">进入专题抢购 &gt; </p>
                </div>
                <s class="line"></s>    <i class="mask"></i>
            </a>
        </li>
        <li>
            <a>
                <img src="image/3.gif">
                <div class="info">
                <h3 style="color:#6d3fa7">时装团</h3>
                <p>时尚春装,清新小潮搭配</p>
                <p class="price"><strong>1</strong><i>折起</i></p>
              	<p class="more">进入专题抢购 &gt; </p>
                </div>
                <s class="line"></s>    <i class="mask"></i>
            </a>
        </li>
        <li>
            <a>
                <img src="image/4.gif">
                <div class="info">
                <h3 style="color:#d61939">TV购</h3>
                <p>补血养颜 就这么简单</p>
                <p class="price"><strong>2.6</strong><i>折起</i></p>
              	<p class="more">进入专题抢购 &gt; </p>
                </div>
                <s class="line"></s><i class="mask"></i>
            </a>
        </li>
        <li>
            <a>
                <img src="image/5.gif">
                <div class="info">
                <h3 style="color:#6f9400">聚新鲜</h3>
                <p>最纯正的泰国香米</p>
                <p class="price"><strong>5</strong><i>折起</i></p>
              	<p class="more">进入专题抢购 &gt; </p>
                </div>
                <i class="mask"></i>
            </a>
        </li>
    </ul>
    </div>
    <div class="btn" id="btn">
    	<span style="color:#f62368">聚美妆</span><span style="color:#ff578a">Baby购</span><span style="color:#6d3fa7">时装团</span><span style="color:#d61939">TV购</span><span id="clear" style="color:#6f9400">聚新鲜</span>
    </div>
    <script type="text/javascript">
		var subject = document.getElementById("subject").getElementsByTagName("li");
		var btnSpan = document.getElementById("btn").getElementsByTagName("span");
		var time = null;
		var num = 0;
		time = setInterval( text , 2000);
		for( var x = 0; x<btnSpan.length; x++ ){
			btnSpan[x].id = x;
			btnSpan[x].onclick = function(){
				clearInterval(time);
				change(this.id);
			}
			btnSpan[x].onmouseout = function(){
				clearInterval(time);
				num = this.id;
				time = setInterval( text , 2000);
			}
		}
		for( var i = 0; i<subject.length; i++ ){
			subject[i].id = i;
			subject[i].onmouseover = function(){
				clearInterval(time);
				change(this.id);
			}
			subject[i].onmouseout = function(){
				time = setInterval( text , 2000);
			}
		}
		function text(){
			num++;
			if(num >= subject.length){
				num = 0;
			}
			change(num);
		}
		function change(classname){
			for( var j = 0; j<subject.length; j++ ){
				subject[j].className = "";
			}
			subject[classname].className = "big";
			num = classname;
		}
       /* function mouseover(e){
            var list = $('#subject li');
            var target = $(e.target).parents('li');
            list.removeClass('big');
            target.addClass('big');
        }
        (function(){
            var outer = $('#subject');
            outer.find('li').on('mouseover', mouseover);
        })()*/
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 放大缩小 切换按钮 缩放切换 表单 焦点图 幻灯片 图片轮播 带标题的焦点图 图片放大缩小 带简介的焦点图 滑动手风琴 手风琴 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到