左右箭头轮播图效果
来源:互联网 发布:科比3d模型数据 编辑:程序博客网 时间:2024/06/05 22:44
//js
var n=0;
$(".left").click(function () {
n--;
if(n<0){
n=0;
$(".left").css("disabled","true");
}
$(".slider_list").animate({"left":-n*110},300);
});
$(".right").click(function () {
n++;
if(n>=9){
n=4;
$(".right").css("disabled","ture");
}
$(".slider_list").animate({"left":-n*110},300);
});
//CSS
#main_banner .banner_slider_wrap {
width: 1220px;
margin: 0 auto;
position: relative;
}
#main_banner .banner_slider_wrap .banner_sliderL,
#main_banner .banner_slider_wrap .banner_sliderR{
width: 30px;
height: 60px;
position: absolute;
z-index: 5;
top: 60px;
border: 1px solid #fff;
cursor: pointer;
}
#main_banner .banner_slider_wrap .banner_sliderL{
background-position:-93px -279px;
left:0;
}
#main_banner .banner_slider_wrap .banner_sliderR{
background-position:-93px -393px;
right:0;
}
#main_banner .banner_slider_wrap .banner_slider{
width: 1120px;
margin: 0 auto;
overflow: hidden;
height: 168px;
margin-top: 20px;
}
#main_banner .banner_slider_wrap .banner_slider .slider_list{
width: 2280px;
position: relative;
}
.banner_slider .slider_list .slider_li{
display: block;
float: left;
margin-right: 20px;
position: relative;
}
.banner_slider .slider_list .slider_li a{
display: block;
position: relative;
/* box-shadow: 0 0 30px #00f inset;
-webkit-box-shadow: 0 0 30px #00f inset;*/
}
.banner_slider .slider_list .slider_li img{
display: block;
max-width: 265px;
}
.banner_slider .slider_list .slider_cover {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: .7;
box-shadow: inset 0 -70px 123px #000;
transition: all .2s ease-in-out;
}
.banner_slider .slider_list .slider_cover:hover{
box-shadow: inset 0 0 0 #000;
opacity: 0;
}
.banner_slider .slider_list .slider_title{
position: absolute;
bottom: 10px;
left: 0;
z-index: 5;
width: 100%;
text-align: center;
color: #fff;
}
.banner_slider .slider_list .slider_title h2{
padding-bottom: 5px;
font-size: 16px;
}
//html
<div class="banner_slider_wrap">
<div class="left index_icons"></div>
<div class="right index_icons"></div>
<div class="banner_slider">
<ul class="slider_list clear">
<li class="slider_li">
<a href="#">
<img src="../img/banner_slider1.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>Z 话题|晒一晒你的手机壳</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider2.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>桌面 | 打造极简风格的桌面</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider1.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>Z 话题|晒一晒你的手机壳</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider2.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>桌面 | 打造极简风格的桌面</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider1.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>Z 话题|晒一晒你的手机壳</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider2.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>桌面 | 打造极简风格的桌面</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider1.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>Z 话题|晒一晒你的手机壳</h2>
</div>
</li>
<li class="slider_li swiper-slide">
<a href="#">
<img src="../img/banner_slider2.jpg" alt="">
<div class="slider_cover"></div>
</a>
<div class="slider_title">
<h2>桌面 | 打造极简风格的桌面</h2>
</div>
</li>
</ul>
</div>
</div>
- 左右箭头轮播图效果
- jquery轮播图带左右箭头
- css3左右箭头
- js实现左右轮播图效果
- js左右箭头图片切换
- boostrap的左右箭头指示器
- 带左右箭头图片切换
- CSS实现箭头效果
- 纯javascript仿网易左右轮播图效果
- 纯JS轮播图,左右箭头/轮播点,自动+自适应屏幕+手机触屏滑动
- 【JQuery】点左右箭头,轮换图片展示
- 带有左右箭头的幻灯片展示
- 移动版轮播图(包含左右箭头、定时器)
- 带左右箭头的焦点图
- 原生JS 左右箭头选择日期
- ViewFlipper 左右滑动效果
- ViewFlipper 左右滑动效果
- 页面左右拉开效果
- 截屏方法
- 自定义倒计时跳过按钮
- Json对象与Json字符串互转(4种转换方式)
- CTPN: Detecting Text in Natural Image with Connectionist Text Proposal Network
- java版本kafka createDirectStream
- 左右箭头轮播图效果
- Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇)
- c++实现string类
- Android之通过配置Flavor实现一个项目打包成多个apk
- iOS常用宏定义
- 数学定理及部分代码(长期更新)
- iOS OC内联函数 inline
- PHP加密技术
- js解决微信屏蔽内置浏览器的下载功能以及判断手机系统