jq轮播图 

一 概念
- 简易jQuery版

```html
<style type="text/css">
    .wrap {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }
    	
    ul {
        width: 1200px;
        height: 200px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
    }
        
    li {
        width: 300px;
        height: 200px;
        float: left;
        font: bold 100px/200px arial;
        text-align: center;
        color: white;
    }
</style>
```

```html
<div class="wrap">
    <ul>
        <li style="background:red;">1</li>
        <li style="background:orange;">2</li>
        <li style="background:pink;">3</li>
        <li style="background:cyan;">4</li>
    </ul>
</div>
<div>
    <input type="button" value="图1" />
    <input type="button" value="图2" />
    <input type="button" value="图3" />
    <input type="button" value="图4" />
</div>
```

```html
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $('input').click(function() {
        $('ul').animate({
            'left': -$(this).index() * $('li').width()
        }, 500);
    })
</script>
```

- swiper的使用

二 代码示范

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.wrap {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: hidden;
position: relative;
}

ul {
width: 1200px;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}

li {
width: 300px;
height: 200px;
float: left;
font: bold 100px/200px arial;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li style="background:red;">1</li>
<li style="background:orange;">2</li>
<li style="background:pink;">3</li>
<li style="background:cyan;">4</li>
</ul>
</div>
<div>
<input type="button" value="图1" />
<input type="button" value="图2" />
<input type="button" value="图3" />
<input type="button" value="图4" />
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 四个input按钮触发点击事件
// ul做动画,整体移动带动li运动
// 出现在wrap区域的li会被显示,超出的会被隐藏

// input触发事件
$('input').click(function () {
// ul做动画
$('ul').animate({
// 定位left状态改变
// 点击第几个 $(this).index() 按钮就往左移动几个宽度$('li').width()
left: -$(this).index() * $('li').width()

}, 300)
})
</script>
</html>



posted @ 2018-10-23 16:12  不沉之月  阅读(92)  评论(0)    收藏  举报