网页轮播图+缓动效果
2020-03-28 20:06
99 查看
实现某宝上面的网页轮播图+缓动效果
代码和注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{ /*清除浏览器原带的格式*/
margin: 0;
padding: 0;
}
#content{ /*注意不要向content添加border和margin属性
会影响offset的使用*/
width: 600px;
height: 300px;
margin: 0 auto; /*设置为0没事*/
font-size: 12px;
position: relative; /*添加定位并超过子元素父盒子部分隐藏*/
overflow: hidden;
}
#img-s li{
list-style-type: none; /*浮动定位，让li标签一排显示*/
float: left;
}
#img-s{
width: 600%; /*之所以要把ul设置这么大是因为要给li安排浮动，让li一排显示 */
position: absolute; /*如果ul太小li就无法浮动，而li仍然会一列显示 */
}
.pre{
list-style-type:none; /*设置小圆圈按钮选中之前的样式*/
width: 10px;
height: 10px;
cursor: pointer;
border:3px rgba(255,255,255,0.5) solid;
margin: 0 3px;
border-radius:50% 50% ;
float: left;
}
.current{
background-color: white; /*设置小圆圈按钮选中之后的样式*/
width: 12px;
height: 12px;
box-shadow: 2px 2px 10px white;
}
#pot-s{
position: absolute; /*对小圆圈相对于content设置定位*/
top: 250px;
left: 100px;
}
img{
width: 600px; /*图片大小*/
height: 300px;
}
a{
z-index: 3; /*a标签样式*/
display: none;
font-size: 50px;
color: white;
text-align: center;
width: 60px;
height: 70px;
background-color:rgba(55,25,55,0.2) ;
text-decoration: none;
position: absolute;
top: 120px;
}
.arrow-l{
left: 20px; /*左箭头*/
}
.arrow-r{
right: 20px; /*右箭头*/
}
</style>
<script type="text/javascript" defer="">
window.addEventListener('load',function () {
var content=document.querySelector('#content');
var img_s=document.querySelector('#img-s');
var pot_s=document.querySelector('#pot-s');
var arrow_l=document.querySelector('.arrow-l');
var arrow_r=document.querySelector('.arrow-r');
st_current_con();
content.addEventListener('mouseenter',function () { //content鼠标放上去的时候左右箭头显示，且图片停止滚动
arrow_l.style.display='block';
arrow_r.style.display='block';
clearInterval(pot_s.timer);
});
content.addEventListener('mouseleave',function ( ) { //content鼠标离开的时候左右箭头消失，且图片重新滚动
arrow_l.style.display='none';
arrow_r.style.display='none';
st_current_con();
});
for (let i=0;i<img_s.children.length;i++){
let li=document.createElement('li'); //创建li标签并添加对应的css样式，设置自定义属性和对应的点击事件
li.className='pre';
li.setAttribute('data-index',i); //注意自定义属性是有一定的定义格式和访问格式的
pot_s.appendChild(li);
pot_s.children[i].addEventListener('click',function () {
for (let j=0;j<pot_s.children.length;j++) { //排他思想
pot_s.children[j].className='pre';
}
this.className='pre current';
moves(img_s,-img_s.parentElement.offsetWidth*pot_s.children[i].dataset.index);
})
}
pot_s.children[0].className='pre current'; //初始化，点进网页的时候第一个小圆点亮
var num=0; //对应img图片设定对应的索引
var circle=0; //对应圆圈图片设定对应的索引
function st_current_con() { //页面图片自动缓动的封装函数
pot_s.timer=setInterval(function() {
if (num === pot_s.children.length) { //如果超出长度，则对num进行处理，且图片瞬移到第一个
num = 0;
img_s.style.left=0+'px';
}
moves(img_s, (++num) * -img_s.parentElement.offsetWidth); //滚动到下一个img
for (let j=0;j<pot_s.children.length;j++) { //排它思想
pot_s.children[j].className='pre';
}
if (circle ===pot_s.children.length-1) { //如果超出长度，则对circle进行处理
circle=-1;
}
pot_s.children[++circle].className='pre current';
},1500);
}
var pict=img_s.children[0].cloneNode(true); //克隆第一个img
img_s.appendChild(pict); //把它加载最后面
arrow_l.addEventListener('click',function () { //左箭头的点击事件
if(!(img_s.offsetLeft%img_s.parentElement.offsetWidth)){ //只有当当前图片复原之后才可以缓动出下一个图片，否则会引起图片播放混乱
(function () {
if (num ===0) { //如果超出长度，则对num进行处理，且图片瞬移到最后一个
num = 4;
img_s.style.left=-img_s.parentElement.offsetWidth*num+'px';
}
moves(img_s, (--num) * -img_s.parentElement.offsetWidth); //滚动到下一个img
for (let j=0;j<pot_s.children.length;j++) { //排它思想
pot_s.children[j].className='pre';
}
if (circle ===0) { //如果超出长度，则对circle进行处理
circle=pot_s.children.length;
}
pot_s.children[--circle].className='pre current';
}())
}
});
arrow_r.addEventListener('click',function () { //右箭头的点击事件
if(!(img_s.offsetLeft%img_s.parentElement.offsetWidth)){ //只有当当前图片复原之后才可以缓动出下一个图片，否则会引起图片播放混乱
(function () {
if (num === pot_s.children.length) { //如果超出长度，则对num进行处理，且图片瞬移到第一个
num = 0;
img_s.style.left=0+'px';
}
moves(img_s, (++num) * -img_s.parentElement.offsetWidth); //滚动到下一个img
for (let j=0;j<pot_s.children.length;j++) { //排它思想
pot_s.children[j].className='pre';
}
if (circle ===pot_s.children.length-1) { //如果超出长度，则对circle进行处理
circle=-1;
}
pot_s.children[++circle].className='pre current';
}())
}
});
function moves(doc,target){ //让img图片缓动的封装函数
clearInterval(doc.timer);
doc.timer=setInterval(function () {
var x=(target-doc.offsetLeft)/10;
var step=x>0?Math.ceil(x):Math.floor(x);
doc.style.left=doc.offsetLeft+step+'px';
if (target===doc.offsetLeft){
clearInterval(doc.timer);
}
},30)
}
})
</script>
</head>
<body>
<div id="content">
<a href="javascript:;" class="arrow-l"><</a> <!--javascript:;为禁止跳转-->
<a href="javascript:;" class="arrow-r">></a> <!-- < 和 > 为html 实体字符-->
<ul id="img-s">
<li><img src="../images/image03.jpg" alt="" title=""/></li>
<li><img src="../images/image04.jpg" alt="" title=""/></li>
<li><img src="../images/image01.jpg" alt="" title=""/></li>
<li><img src="../images/image06.jpg" alt="" title=""/></li>
</ul>
<ul id="pot-s">
</ul>
</div>
</body>
</html>
效果图：
***
- 点赞
- 收藏
- 分享
- 文章举报
翻斗幼儿园的胡图图
发布了36 篇原创文章 · 获赞 0 · 访问量 591
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery图片轮播滚动效果(网页效果--每日一更)
- myFocus制作网页焦点图 实现图片轮播效果
- 网页常用动态效果--网易轮播图
- 使用Bootstrap编写一个简单的网页轮播图效果
- jquery slider 实现手机网页上-仿淘宝首页 轮播焦点图 效果。
- HTML5 canvas 图片切换/图片轮播 贝塞尔曲线缓动 3D效果 (之) : slicease.js
- javascript制作网页轮播图效果
- 用js代码制作网页轮播图效果
- 网页常用动态效果--优酷轮播图
- （自学收获）纯css网页小部件--轮播图效果
- jQuery实现制作网页轮播图效果
- 轮播图，焦点hover，图片缓动效果
- JavaScript网页特效（三）选项卡切换的效果和轮播图效果
- 网页特效 下拉框内容自动匹配效果 转
- Axure 9 教程：Axure 9 实现轮播图效果
- ViewPager实现广告轮播效果
- 原生JS实现"旋转木马"效果的图片轮播插件
- 测试网页在不同浏览器下的效果
- 如何让网页产生渐变效果
- 小白的jquery学习之路之04 效果 轮播图