//文字左右轮播
!(function () {
var nav = document.getElementById(‘nav‘);
var wrap = document.getElementById(‘wrap‘);
var start = document.getElementById(‘start‘);
var startWidth = getStyle(start, ‘width‘);
function move() {
wrap.scrollLeft++;
if (wrap.scrollLeft >= startWidth) {
wrap.scrollLeft = 0;
}
}
var timerSlider = window.setInterval(move, 10);
nav.touchstart = function () {
window.clearInterval(timerSlider);
};
nav.touchend = function () {
timerSlider = window.setInterval(move, 10);
};
// 获取css的值
function getStyle(ele, attr) {
var val = null, reg = null;
if (window.getComputedStyle) {
val = window.getComputedStyle(ele, null)[attr];
} else {
val = ele.currentStyle[attr];
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; // 正则匹配单位,若带有px等单位，将单位剔除掉
return reg.test(val) ? parseFloat(val) : val;
}
})();
//文字上下轮播
<div class="carousel_text">
<div class="text_main">
<div class="nesest">最新资讯 :</div>
<ul>
<li>
<a href="">2017广东省企业500强发布 深圳大生荣列第30位</a>
</li>
<li>
<a href="">2017广东省企业500强发布 深圳大生荣列第3位</a>
</li>
</ul>
</div>
</div>
<script>
var scrollIndex = 0;
var Timer = null;
function scroll_f() {
clearInterval(Timer);
var ul = $(".text_main ul");
var li = ul.children("li");
var h = li.height();
var index = 0;
ul.css("height", h * li.length * 2);
ul.html(ul.html() + ul.html());
function run() {
if (scrollIndex >= li.length) {
ul.css({ top: 0 });
scrollIndex = 1;
ul.animate({ top: -scrollIndex * h }, 500);
} else {
scrollIndex++;
ul.animate({ top: -scrollIndex * h }, 500);
}
}
Timer = setInterval(run, 1500);
};
$(function () {
scroll_f();
})
</script>
//swiper插件轮播
// 一。引进文件
//1.导入 <link rel="stylesheet" href="./css/swiper.min.css">
//2.导入jQ，
//3.后再导入<script type="text/javascript" src="./js/swiper.jquery.min.js"></script>
//二。1.html结构
<div class="swiper-container">
<div class="swiper-wrapper">
<a href="">
<img src="./img/banner-1.png" >
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="./img/banner-2.png" >
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="./img/banner-01.png" >
</a>
<a href="./register.html" class="register">立即注册</a>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
//2.导航等组件可以放在container之外
//3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
//4.初始化Swiper：最好是挨着</body>标签
<script>
var mySwiper = new Swiper (‘.swiper-container‘, {
direction: ‘vertical‘,
loop: true,
// 如果需要分页器
pagination: ‘.swiper-pagination‘,
// 如果需要前进后退按钮
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
// 如果需要滚动条
scrollbar: ‘.swiper-scrollbar‘,
})
</script>
// swiper官网：http://3.swiper.com.cn/
//jQ完整轮播图
<style type="text/css">
div,
ul,
li,
a,
span,
img {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#slider {
width: 500px;
height: 300px;
margin: 10% auto;
position: relative;
}
.slider_list li {
position: absolute;
display: none;
}
.slider_list li:first-child {
display: block;
}
.slider_icon {
position: absolute;
z-index: 1;
left: 50%;
bottom: 20px;
font-size: 0;
padding: 4px 8px;
margin-left: -96px;
border-radius: 12px;
background-color: hsla(0, 0%, 100%, .3);
}
.slider_icon i {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
}
.btn {
background: #fff;
}
.arrow {
display: none;
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, .2);
position: absolute;
top: 50%;
margin-top: -30px;
}
.prve {
left: 0;
}
.next {
right: 0;
}
.arrow span {
display: block;
width: 10px;
height: 10px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}
.slider_left {
margin: 25px 0 0 10px;
transform: rotate(45deg);
}
.slider_right {
margin: 25px 0 0 5px;
transform: rotate(-135deg);
}
.arrow:hover {
background: #444;
}
#slider:hover .arrow {
display: block;
}
.btn_act {
background: #db192a;
}
</style>
<body>
<div id="slider">
<ul class="slider_list">
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-1.png"></a>
</li>
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-2.png"></a>
</li>
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-3.png"></a>
</li>
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-4.png"></a>
</li>
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-5.png"></a>
</li>
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-6.png"></a>
</li>
<li>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300-7.png"></a>
</li>
</ul>
<div class="slider_icon">
<i class="btn btn_act"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</div>
<a href="javascript:;" class="arrow prve">
<span class="slider_left"></span>
</a>
<a href="javascript:;" class="arrow next">
<span class="slider_right"></span>
</a>
</div>
<script src="../common.js/jquery-3.1.1.min.js"></script>
<script type=" text/javascript ">
$(function() {
var count = 0;
var $li = $("#slider>ul > li ");
$(".next").click(function() {
count++;
if(count == $li.length) {
count = 0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass(‘btn_act‘);
console.log(count);
});
$(".prve").click(function() {
count--;
if(count == -1) {
count = $li.length - 1;
}
console.log(count);
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass(‘btn_act‘);
});
$(".slider_icon i").mouseenter(function() {
$(this).addClass(‘btn_act‘).siblings().removeClass("btn_act");
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
count = $(this).index();
});
});
</script>
</body>
