商品左右循环切换的效果
说明：这个jquery我也是网上找的，感觉代码很简洁，比很多插件好多了。但是我研究了好久还是不太明白切换的原理是怎样的，哎。记录一下，下次用得到就可以参考参考。（我还自己加了个自动轮播的效果进去）类似下面这张效果
文章图片
【商品左右循环切换的效果】代码如下：
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.scroll{
margin: 40px auto;
position: relative;
width: 960px;
height: 240px;
overflow: hidden;
}
.scroll_box{
width: 960px;
height: 240px;
overflow: hidden;
}
.scroll_ul{
width: 2880px;
height: 240px;
}
.scroll_ul .scroll_item{
width: 960px;
height: 240px;
overflow: hidden;
float: left;
}
.scroll_ul .scroll_item .item_box{
width: 240px;
height: 240px;
background: orange;
color: #fff;
font-size: 24px;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
.scroll .btn{
width: 32px;
height: 60px;
position: absolute;
top: 90px;
}
.scroll .prev_btn{
background: url(images/b_left.png);
left: 0;
}
.scroll .next_btn{
background: url(images/b_right.png);
right: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
推荐阅读
- whlie循环和for循环的应用
- 能力和自信的良性循环
- 两三老友|两三老友 足矣
- 时间管理的任务模型
- Swift7|Swift7 - 循环、函数
- for循环遍历数组
- 带你了解NodeJS事件循环
- Java中的i++|Java中的i++ 和 ++i 在for循环使用
- js|js 事件循环
- django开发电子商城（二十二）购物车商品的所有者身份转换