轮播js代码、jquery tab切换 非常好用的jquery库

jquery非常好用的库

https://www.jq22.com/

jquery常用前端js代码汇总

https://www.jq22.com/webinfo3

html

<input id="btn1" type="button" value="向左">
<input id="btn2" type="button" value="向右">
<div id="div1">

    <ul id="ul1">
        <li><img src="https://www.jq22.com/img/cs/500x300-1.png"></li>
        <li><img src="https://www.jq22.com/img/cs/500x300-2.png"></li>
        <li><img src="https://www.jq22.com/img/cs/500x300-3.png"></li>
        <li><img src="https://www.jq22.com/img/cs/500x300-4.png"></li>
    </ul>
</div>

css

* {
    margin:0;
    padding:0;
}
#div1 {
    width:640px;
    height:120px;
    margin:100px auto;
    background-color:#646464;
    position:relative;
    overflow:hidden;
}
#div1 ul {
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
    background-color:#3b7796;
}
#div1 ul li {
    float:left;
    width:160px;
    height:120px;
    list-style:none;
}

js

window.onload = function() {
    var oDiv = document.getElementById('div1');
    var oUl = document.getElementById('ul1');
    var speed = 2; //初始化速度

    oUl.innerHTML += oUl.innerHTML; //图片内容*2-----参考图（2）
    var oLi = document.getElementsByTagName('li');
    oUl.style.width = oLi.length * 160 + 'px'; //设置ul的宽度使图片可以放下

    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');


    function move() {
        if (oUl.offsetLeft < -(oUl.offsetWidth / 2)) { //向左滚动，当靠左的图4移出边框时
            oUl.style.left = 0;
        }

        if (oUl.offsetLeft > 0) { //向右滚动，当靠右的图1移出边框时
            oUl.style.left = -(oUl.offsetWidth / 2) + 'px';
        }

        oUl.style.left = oUl.offsetLeft + speed + 'px';
    }

    oBtn1.addEventListener('click', function() {
        speed = -2;
    }, false);
    oBtn2.addEventListener('click', function() {
        speed = 2;
    }, false);

    var timer = setInterval(move, 30); //全局变量 ，保存返回的定时器

    oDiv.addEventListener('mouseout', function() {
        timer = setInterval(move, 30);
    }, false);
    oDiv.addEventListener('mousemove', function() {
        clearInterval(timer); //鼠标移入清除定时器
    }, false);
}

jquery的tab切换

html

<div id="wrap">
    <div id="tit">
        <span class="select">标题1</span>
        <span>标题2</span>
        <span>标题3</span>
    </div>
    <ul id="con">
        <li class="show">内容111</li>
        <li>内容222</li>
        <li>内容333</li>
    </ul>
</div>

css

  * {
    margin:0;
    padding:0;
    list-style:none;
}
#wrap {
    width:600px;
    margin:100px auto 0;
    overflow:hidden;
}
#tit {
    height:30px;
    width:600px;
}
#tit span {
    float:left;
    height:30px;
    line-height:30px;
    width:200px;
    font-size:20px;
    text-align:center;
    color:#ccc;
    background:green;
}
#con li {
    display:none;
    height:200px;
    width:600px;
    background:pink;
    font-size:100px;
    line-height:200px;
    text-align:center;
}
#tit span.select {
    background:red;
    color:#ccc;
}
#con li.show {
    display:block;
}

js

$('#tit span').click(function() {
    var i = $(this).index(); //下标第一种写法
    //var i = $('tit').index(this);//下标第二种写法
    $(this).addClass('select').siblings().removeClass('select');
    $('#con li').eq(i).show().siblings().hide();
});